Skip to content

Commit

Permalink
chore: ResponsiveView sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@eriklimakc
eriklimakc committed Nov 15, 2023
1 parent 6580ba2 commit 7cee9d6
Showing 1 changed file with 112 additions and 10 deletions.
122 changes: 112 additions & 10 deletions ...Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ResponsiveViewSamplePage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,137 @@
<sample:SamplePageLayout.DesignAgnosticTemplate>
<DataTemplate>
<StackPanel>
<StackPanel.Resources>
<Color x:Key="UnoGreen">#67E5AD</Color>
<Color x:Key="UnoPurple">#7A67F8</Color>
<Color x:Key="UnoRed">#F85977</Color>
<Color x:Key="UnoBlue">#159BFF</Color>
</StackPanel.Resources>
<utu:ResponsiveView>
<utu:ResponsiveView.ExtraNarrowContent>
<DataTemplate>
<TextBlock Text="Extra Narrow"
Style="{StaticResource DisplayLarge}" />
<StackPanel Spacing="16">
<TextBlock Text="Extra Narrow"
HorizontalAlignment="Center"
Style="{StaticResource DisplaySmall}" />
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
Spacing="20">
<Rectangle Height="100"
Width="100"
Fill="{StaticResource UnoGreen}" />
<Ellipse Height="100"
Width="100"
Fill="{StaticResource UnoPurple}" />
<Rectangle Height="100"
Width="100"
Fill="{StaticResource UnoRed}" />
<Ellipse Height="100"
Width="100"
Fill="{StaticResource UnoBlue}" />

</StackPanel>
</StackPanel>
</DataTemplate>
</utu:ResponsiveView.ExtraNarrowContent>
<utu:ResponsiveView.NarrowContent>
<DataTemplate>
<TextBlock Text="Narrow"
Style="{StaticResource DisplayLarge}" />
<StackPanel Spacing="16">
<TextBlock Text="Narrow"
HorizontalAlignment="Center"
Style="{StaticResource DisplaySmall}" />
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
Spacing="20">
<Rectangle Height="150"
Width="150"
Fill="{StaticResource UnoGreen}" />
<Ellipse Height="150"
Width="150"
Fill="{StaticResource UnoPurple}" />
<Rectangle Height="150"
Width="150"
Fill="{StaticResource UnoRed}" />
<Ellipse Height="150"
Width="150"
Fill="{StaticResource UnoBlue}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</utu:ResponsiveView.NarrowContent>
<utu:ResponsiveView.DefaultContent>
<DataTemplate>
<TextBlock Text="Default"
Style="{StaticResource DisplayLarge}" />
<StackPanel Spacing="16">
<TextBlock Text="Default"
HorizontalAlignment="Center"
Style="{StaticResource DisplayMedium}" />
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
Spacing="20">
<Rectangle Height="200"
Width="200"
Fill="{StaticResource UnoGreen}" />
<Ellipse Height="200"
Width="200"
Fill="{StaticResource UnoPurple}" />
<Rectangle Height="200"
Width="200"
Fill="{StaticResource UnoRed}" />
<Ellipse Height="200"
Width="200"
Fill="{StaticResource UnoBlue}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</utu:ResponsiveView.DefaultContent>
<utu:ResponsiveView.WideContent>
<DataTemplate>
<TextBlock Text="Wide"
Style="{StaticResource DisplayLarge}" />
<StackPanel Spacing="16">
<TextBlock Text="Wide"
HorizontalAlignment="Center"
Style="{StaticResource DisplayLarge}" />
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
Spacing="20">
<Rectangle Height="250"
Width="250"
Fill="{StaticResource UnoGreen}" />
<Ellipse Height="250"
Width="250"
Fill="{StaticResource UnoPurple}" />
<Rectangle Height="250"
Width="250"
Fill="{StaticResource UnoRed}" />
<Ellipse Height="250"
Width="250"
Fill="{StaticResource UnoBlue}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</utu:ResponsiveView.WideContent>
<utu:ResponsiveView.ExtraWideContent>
<DataTemplate>
<TextBlock Text="Extra Wide"
Style="{StaticResource DisplayLarge}" />
<StackPanel Spacing="16">
<TextBlock Text="Extra Wide"
HorizontalAlignment="Center"
Style="{StaticResource DisplayLarge}" />
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
Spacing="20">
<Rectangle Height="300"
Width="300"
Fill="{StaticResource UnoGreen}" />
<Ellipse Height="300"
Width="300"
Fill="{StaticResource UnoPurple}" />
<Rectangle Height="300"
Width="300"
Fill="{StaticResource UnoRed}" />
<Ellipse Height="300"
Width="300"
Fill="{StaticResource UnoBlue}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</utu:ResponsiveView.ExtraWideContent>
</utu:ResponsiveView>
Expand Down

0 comments on commit 7cee9d6

Please sign in to comment.