WPF: תפריט ListView בעל שתי רמות

avr416

אני מעוניין להוסיף תפריט צד כמו SideBar לאפליקציית WPF שיש בו שתי רמות, הרמה הראשונה זה שם הספר, והשניה זה הפרקים. כך שבתחילה יוצג למשתמש שמות הספרים הקיימים כך שלחיצה עליהם תציג את תוכן כל הספר, אולם אני רוצה שבנוסף הלחיצה תציג גם את תוכן הספר ותציג את רשימת הפרקים שלו.
כמו סגנון התפריטים שמקובל היום..
משהו בסגנון הזה, אולם הוא משתמש בטאבים וזה לא טוב לי כיון שזה מציג את תוכן הספר באותו מיקום, ואני רוצה שמיד לאחר הספר הנוכחי יוצג התוכן שלו.
עבדתי בצורה דומה למה שמתואר כאן, אך אני רוצה שזה יתן לי כמה רמות..

אשמח לעזרה..
תודה רבה!

פורסם במקור בפורום CODE613 ב01/05/2016 18:26 (+03:00)

avr416

מה שעשיתי כרגע זה דטה טמפלט של listView הבן, בתוך דטה טמלט של listview האב, ככה:

<DataTemplate x:Key="MetroListBoxItemTemplate">            
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="200"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Path Data="{Binding Image}" Stretch="Uniform" Width="28" Height="28"
                    Fill="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
                <StackPanel Grid.Column="1" Margin="5">
                    <TextBlock Text="{Binding Path=Title, FallbackValue=Title}" FontFamily="Segoe UI" FontSize="16"
                            Foreground="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
                </StackPanel>
                <ListBox Visibility="Collapsed"
                    Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                         ItemsSource="{Binding Children}"
                         HorizontalAlignment="Left" VerticalAlignment="Top" Width="266"
                         Background="{x:Null}" BorderBrush="{x:Null}"
                         ItemContainerStyle="{DynamicResource MetroListBoxItemStyle}"
                         ItemTemplate="{DynamicResource SubMetroListBoxItemTemplate}"
                          SelectionChanged="SubSideBar_SelectionChanged"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SubMetroListBoxItemTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="200"/>
                </Grid.ColumnDefinitions>
                <Path Data="{Binding Image}" Stretch="Uniform" Width="28" Height="28"
                    Fill="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
                <StackPanel Grid.Column="1" Margin="5">
                    <TextBlock Text="{Binding Path=Title, FallbackValue=Title}" FontFamily="Segoe UI light" FontSize="14"
                            Foreground="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
                </StackPanel>
            </Grid>
        </DataTemplate>

ככה שהבנים (דהיינו הפרקים) מתרנדרים אוט' תחת אבא שלהם (שהוא הספר..) ומוצגים בצורה טיפה שונה (פונט קטן ודק יותר).
הבעיה שלי היא שאני מנסה לעשות שזה יהיה מוסתר, ורק אם לוחצים על האבא תפתח רשימת הפרקים. אך כיון שהכל נוצר רק בזמן ריצה, אז אני לא מצליח לקרוא בקוד לליסט כדי להציג אותו באירוע הלחיצה.
ניסיתי לתפוס את אובייקט הסנדר שנשלח כשלוחצים על האבא, אך אני רואה שהוא מכיל רק משתנה Parent שאומר מי אבא שלו, אך אין דרך לדעת מי הבנים שלו (דהיינו הליסט השני שנוצר) כדי להפוך אותם לנראים..
אשמח לתשובה מהמומחים..
תודה רבה רבה מראש!!
אברהם

פורסם במקור בפורום CODE613 ב02/05/2016 07:27 (+03:00)

dovid

@avr416

משהו בסגנון הזה, אולם הוא משתמש בטאבים וזה לא טוב לי כיון שזה מציג את תוכן הספר באותו מיקום, ואני רוצה שמיד לאחר הספר הנוכחי יוצג התוכן שלו.

לא הבנתי מה ההבדל בין מה שזה עושה למה שאתה רוצה.
(אם יש לך דוגמה קיימת אפי' וובית זה יחסוך לך דיבורים).

פורסם במקור בפורום CODE613 ב02/05/2016 10:16 (+03:00)

avr416

טוב, אז קודם כל קצת התבלבתי מקודם וכתבתי ListView אך השתמשתי ב ListBox (listView הוא יורש מlistbox ויש לו תכונות קצת יותר מתקדמות...)

לענייננו, מה שעשיתי בסוף זה השתמשתי בExpander בשביל הרמה הראשונה, ובתוכו הכנסתי את הListView, כך שברגע שלוחצים על שם הספר נפתחת הרשימה עם כל הפרקים, וכשלוחצים על הפרק הרצוי - מוצג התוכן שלו.
הנה הקוד:

<DataTemplate x:Key="MetroDataTemplate1">
            <Expander>
                <Expander.Header>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40"/>
                            <ColumnDefinition Width="200"/>
                        </Grid.ColumnDefinitions>
                        <Path Data="{Binding Image}" Stretch="Uniform" Width="28" Height="28"
                    Fill="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
                        <StackPanel Grid.Column="1" Margin="5">
                            <TextBlock Text="{Binding Path=Title, FallbackValue=Title}" FontFamily="Segoe UI light" FontSize="14"
                            Foreground="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
                        </StackPanel>
                    </Grid>
                </Expander.Header>
                <ListView HorizontalAlignment="Left" VerticalAlignment="Top" Width="250"
        			Background="{x:Null}" BorderBrush="{x:Null}" 
        			ItemsSource="{Binding Children}"
        			SelectionChanged="SubSideBar_SelectionChanged">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}"  FontFamily="Segoe UI light" FontSize="14"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Expander>
        </DataTemplate>

פורסם במקור בפורום CODE613 ב02/05/2016 10:20 (+03:00)

avr416

דוד, רק עכשיו ראיתי את מה שכתבת..
הנה דוגמא:

דוגמא.png
הנה מה שיצא:

דוגמא ברכות.png
צריך עוד קצת עבודה עיצובית כדי שיראה יותר דומה למקור
אבל כרגע זה בסדר..
תודה!

פורסם במקור בפורום CODE613 ב02/05/2016 10:24 (+03:00)

תחומים - פורום חרדי מקצועי

WPF: תפריט ListView בעל שתי רמות