Skip to content

Commit 3680229

Browse files
DevTKSSDevTKSS
committed
feat(CodeSampleExpander): Add Expander with TabBar to each Page for visualizing the CodeSample
1 parent bd5a9e6 commit 3680229

File tree

5 files changed

+120
-84
lines changed

5 files changed

+120
-84
lines changed

‎src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/CounterPage.xaml‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
mc:Ignorable="d"
99
Background="{ThemeResource BackgroundBrush}">
1010

11-
<Grid x:Name="CounterPageContentGrid">
11+
<Grid>
1212
<Grid.RowDefinitions>
1313
<RowDefinition Height="*" x:Name="ContentArea"/>
14-
<RowDefinition Height="Auto" MaxHeight="500" />
14+
<RowDefinition Height="Auto" />
1515
</Grid.RowDefinitions>
1616

1717
<StackPanel x:Name="spCounterContent"
@@ -45,5 +45,30 @@
4545
Margin="12"
4646
Width="{x:Bind spCounterContent.Width, Mode=OneWay}"/>
4747
</StackPanel>
48+
<Expander Grid.Row="1"
49+
MaxHeight="400"
50+
ExpandDirection="Down"
51+
VerticalAlignment="Bottom"
52+
HorizontalAlignment="Stretch"
53+
HorizontalContentAlignment="Stretch"
54+
ContentTemplate="{StaticResource CodeSampleWrappedTextblock}"
55+
Content="{Binding CurrentCodeSample}">
56+
57+
<Expander.HeaderTemplate>
58+
<DataTemplate>
59+
<utu:TabBar VerticalAlignment="Bottom"
60+
HorizontalAlignment="Stretch"
61+
Orientation="Horizontal"
62+
HorizontalContentAlignment="Stretch"
63+
SelectionIndicatorTransitionMode="Slide"
64+
ItemsSource="{Binding CodeSampleOptions, Mode=TwoWay}"
65+
ItemTemplate="{StaticResource BottomTabBarItemTemplate}"
66+
utu:CommandExtensions.Command="{Binding SwitchCodeSampleAsync}"
67+
utu:CommandExtensions.CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self},Path=SelectedItem, UpdateSourceTrigger=PropertyChanged}">
68+
</utu:TabBar>
69+
</DataTemplate>
70+
</Expander.HeaderTemplate>
71+
72+
</Expander>
4873
</Grid>
4974
</Page>

‎src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/DashboardPage.xaml‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -53,32 +53,26 @@
5353
</GridView>
5454
</DataTemplate>
5555
</mvux:FeedView>
56-
<Expander Grid.Row="2"
56+
<Expander Grid.Row="1"
57+
MaxHeight="400"
5758
ExpandDirection="Down"
58-
MaxHeight="300">
59+
VerticalAlignment="Bottom"
60+
HorizontalAlignment="Stretch"
61+
HorizontalContentAlignment="Stretch"
62+
Content="{Binding CurrentCodeSample}"
63+
ContentTemplate="{StaticResource CodeSampleWrappedTextblock}">
5964

6065
<Expander.Header>
6166
<utu:TabBar VerticalAlignment="Bottom"
67+
Orientation="Horizontal"
68+
HorizontalAlignment="Stretch"
69+
SelectionIndicatorTransitionMode="Slide"
6270
ItemsSource="{Binding CodeSampleOptions}"
63-
SelectedItem="{Binding SelectedOption, Mode=TwoWay}">
64-
<utu:TabBar.ItemTemplate>
65-
<DataTemplate>
66-
<utu:TabBarItem Content="{Binding}"
67-
Command="{Binding SwitchCodeSampleAsync}"
68-
CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Content}"
69-
Style="{StaticResource MaterialTopTabBarItemStyle}"
70-
Icon="Home"/>
71-
</DataTemplate>
72-
</utu:TabBar.ItemTemplate>
71+
ItemTemplate="{StaticResource BottomTabBarItemTemplate}"
72+
utu:CommandExtensions.Command="{Binding SwitchCodeSampleAsync}"
73+
utu:CommandExtensions.CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=SelectedItem,UpdateSourceTrigger=PropertyChanged}">
7374
</utu:TabBar>
7475
</Expander.Header>
75-
<Expander.Content>
76-
<ScrollViewer>
77-
<TextBlock x:Name="CodeSampleBlock"
78-
Text="{Binding CurrentCodeSample}"
79-
TextWrapping="WrapWholeWords"/>
80-
</ScrollViewer>
81-
</Expander.Content>
8276

8377
</Expander>
8478
</Grid>

‎src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/ListboardPage.xaml‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,18 @@
1010
xmlns:utu="using:Uno.Toolkit.UI"
1111
xmlns:conv="using:CommunityToolkit.WinUI.Converters"
1212
xmlns:um="using:Uno.Material"
13+
xmlns:models="using:DevTKSS.Uno.Samples.MvuxGallery.Models"
1314
xmlns:sys="using:System"
1415
mc:Ignorable="d"
1516
Background="{ThemeResource BackgroundBrush}">
1617

1718
<Grid>
1819
<Grid.RowDefinitions>
19-
<RowDefinition Height="Auto"/>
2020
<RowDefinition Height="*"/>
21-
<RowDefinition Height="Auto"/>
22-
<RowDefinition Height="Auto"/>
21+
<RowDefinition Height="Auto" />
2322
</Grid.RowDefinitions>
2423

25-
<mvux:FeedView x:Name="LeftFeedView"
26-
Grid.Row="1"
24+
<mvux:FeedView Grid.Row="0"
2725
Source="{Binding GalleryImages}"
2826
Margin="3">
2927
<mvux:FeedView.ValueTemplate>
@@ -38,43 +36,33 @@
3836
CanDrag="False"
3937
CanReorderItems="False"
4038
SelectionMode="Single">
41-
4239
</ListView>
4340
</DataTemplate>
4441
</mvux:FeedView.ValueTemplate>
4542
</mvux:FeedView>
4643

47-
48-
<Expander Grid.Row="3"
49-
ExpandDirection="Down"
44+
<Expander Grid.Row="1"
5045
MaxHeight="400"
51-
Header="{Binding CodeSampleOptions,Mode=TwoWay}"
52-
Content="{Binding CurrentCodeSample, Mode=TwoWay}">
53-
<Expander.ContentTemplate>
54-
<DataTemplate>
55-
<ScrollViewer>
56-
<TextBlock Text="{Binding }"
57-
TextWrapping="WrapWholeWords"/>
58-
</ScrollViewer>
59-
</DataTemplate>
60-
</Expander.ContentTemplate>
61-
<Expander.HeaderTemplate>
62-
<DataTemplate>
63-
<utu:TabBar SelectedIndex="1"
64-
ItemsSource="{Binding }"
65-
Style="{StaticResource MaterialTopTabBarItemStyle}">
66-
<utu:TabBar.ItemTemplate>
67-
<DataTemplate>
68-
<utu:TabBarItem Content="{Binding}"
69-
Command="{Binding SwitchCodeSampleAsync}"
70-
CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Content}"
71-
Style="{StaticResource MaterialTopTabBarItemStyle}"
72-
Icon="Home"/>
73-
</DataTemplate>
74-
</utu:TabBar.ItemTemplate>
75-
</utu:TabBar>
76-
</DataTemplate>
77-
</Expander.HeaderTemplate>
46+
ExpandDirection="Down"
47+
VerticalAlignment="Bottom"
48+
HorizontalAlignment="Stretch"
49+
HorizontalContentAlignment="Stretch"
50+
ContentTemplate="{StaticResource CodeSampleWrappedTextblock}"
51+
Content="{Binding CurrentCodeSample}">
52+
53+
<Expander.Header>
54+
<utu:TabBar VerticalAlignment="Bottom"
55+
Orientation="Horizontal"
56+
HorizontalAlignment="Stretch"
57+
HorizontalContentAlignment="Center"
58+
SelectionIndicatorTransitionMode="Slide"
59+
ItemsSource="{Binding CodeSampleOptions}"
60+
ItemTemplate="{StaticResource BottomTabBarItemTemplate}"
61+
utu:CommandExtensions.Command="{Binding SwitchCodeSampleAsync}"
62+
utu:CommandExtensions.CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=SelectedItem,UpdateSourceTrigger=PropertyChanged}">
63+
64+
</utu:TabBar>
65+
</Expander.Header>
7866
</Expander>
7967
</Grid>
8068
</Page>

‎src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/MainPage.xaml‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,21 @@
1818
https://learn.microsoft.com/de-de/windows/apps/design/controls/navigationview#top-whitespace-->
1919
</Page.Resources>
2020
<Grid x:Name="MainContentGrid"
21-
uen:Region.Attached="True">
21+
uen:Region.Attached="True"
22+
utu:SafeArea.Insets="VisibleBounds">
2223
<Grid.RowDefinitions>
2324
<RowDefinition Height="*" />
24-
<RowDefinition Height="Auto" MaxHeight="400" />
25+
<RowDefinition Height="Auto"/>
2526
</Grid.RowDefinitions>
26-
<NavigationView IsBackButtonVisible="Collapsed"
27-
IsTitleBarAutoPaddingEnabled="True"
28-
IsPaneToggleButtonVisible="True"
29-
PaneDisplayMode="Auto"
30-
uen:Region.Attached="True"
31-
HorizontalAlignment="Stretch"
32-
Header="{Binding CurrentHeader}">
27+
<NavigationView Grid.Row="0"
28+
IsBackButtonVisible="Collapsed"
29+
IsTitleBarAutoPaddingEnabled="True"
30+
IsPaneToggleButtonVisible="True"
31+
PaneDisplayMode="Auto"
32+
uen:Region.Attached="True"
33+
HorizontalAlignment="Stretch"
34+
Header="{Binding CurrentHeader}"
35+
IsSettingsVisible="False">
3336
<NavigationView.MenuItems>
3437

3538
<NavigationViewItem x:Name="NavItemDashboard"
@@ -61,7 +64,28 @@
6164
Visibility="Visible" />
6265
</NavigationView.Content>
6366
</NavigationView>
67+
<Expander Grid.Row="1"
68+
MaxHeight="400"
69+
ExpandDirection="Down"
70+
VerticalAlignment="Bottom"
71+
HorizontalAlignment="Stretch"
72+
HorizontalContentAlignment="Stretch"
73+
Content="{Binding CurrentCodeSample}"
74+
ContentTemplate="{StaticResource CodeSampleWrappedTextblock}">
6475

76+
<Expander.Header>
77+
<utu:TabBar VerticalAlignment="Bottom"
78+
Orientation="Horizontal"
79+
HorizontalAlignment="Stretch"
80+
HorizontalContentAlignment="Center"
81+
SelectionIndicatorTransitionMode="Slide"
82+
ItemTemplate="{StaticResource BottomTabBarItemTemplate}"
83+
ItemsSource="{Binding CodeSampleOptions}"
84+
utu:CommandExtensions.Command="{Binding SwitchCodeSampleAsync}"
85+
utu:CommandExtensions.CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=SelectedItem,UpdateSourceTrigger=PropertyChanged}">
86+
</utu:TabBar>
87+
</Expander.Header>
88+
</Expander>
6589
</Grid>
6690

6791
</Page>

‎src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/SimpleCardsPage.xaml‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,12 @@
88
mc:Ignorable="d"
99
xmlns:uen="using:Uno.Extensions.Navigation.UI"
1010
xmlns:utu="using:Uno.Toolkit.UI"
11-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
11+
Background="{ThemeResource BackgroundBrush}">
1212
<Grid utu:SafeArea.Insets="VisibleBounds"
1313
uen:Region.Attached="True">
1414
<Grid.RowDefinitions>
1515
<RowDefinition Height="*"/>
16-
<RowDefinition Height="Auto" MaxHeight="400"/>
17-
<RowDefinition Height="Auto"/>
16+
<RowDefinition Height="Auto" />
1817
</Grid.RowDefinitions>
1918
<ScrollViewer Grid.Row="0">
2019
<StackPanel Orientation="Vertical">
@@ -58,21 +57,27 @@
5857
MediaContentTemplate="{StaticResource MediaContentTemplate}"/>
5958
</StackPanel>
6059
</ScrollViewer>
61-
<TextBlock uen:Region.Navigator="Content"
62-
Grid.Row="1"
63-
uen:Region.Name="SimpleCardCodeSample"
64-
Text="{Binding CurrentCodeSample}"/>
60+
<Expander Grid.Row="1"
61+
MaxHeight="400"
62+
ExpandDirection="Down"
63+
VerticalAlignment="Bottom"
64+
HorizontalAlignment="Stretch"
65+
HorizontalContentAlignment="Stretch"
66+
Content="{Binding CurrentCodeSample}"
67+
ContentTemplate="{StaticResource CodeSampleWrappedTextblock}">
6568

66-
<!--Bottom TabBar-->
67-
<utu:TabBar Grid.Row="2"
68-
uen:Region.Attached="True"
69-
SelectedIndex="1"
70-
VerticalAlignment="Bottom">
71-
<utu:TabBar.Items>
72-
<utu:TabBarItem Content="Card Control XAML" uen:Region.Name="CardControlXaml"/>
73-
<utu:TabBarItem Content="HeaderContent Template" />
74-
<utu:TabBarItem Content="MediaContent Template"/>
75-
</utu:TabBar.Items>
76-
</utu:TabBar>
69+
<Expander.Header>
70+
<utu:TabBar VerticalAlignment="Bottom"
71+
Orientation="Horizontal"
72+
SelectionIndicatorTransitionMode="Slide"
73+
ItemsSource="{Binding CodeSampleOptions}"
74+
ItemTemplate="{StaticResource BottomTabBarItemTemplate}"
75+
utu:CommandExtensions.Command="{Binding SwitchCodeSampleAsync}"
76+
utu:CommandExtensions.CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self},Path=SelectedItem,UpdateSourceTrigger=PropertyChanged}">
77+
78+
</utu:TabBar>
79+
</Expander.Header>
80+
81+
</Expander>
7782
</Grid>
7883
</Page>

0 commit comments

Comments
 (0)