WindowsCommunityToolkit/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GridExtensions/GridExtensionsCode.bind at 59e9a70630065fa7c7c2d8a1b28e6b0f5610d0a2 · nandin-borjigin/WindowsCommunityToolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:triggers="using:Microsoft.Toolkit.Uwp.UI.Triggers"
    mc:Ignorable="d">

    <Page.Resources>
        <Style TargetType="Border">
            <Setter Property="Background" Value="Gray" />
            <Setter Property="Padding" Value="4" />
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
        </Style>
    </Page.Resources>

    <Grid VerticalAlignment="Top" Padding="16">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <triggers:CompareStateTrigger
                            Value="{Binding ElementName=Resizer, Path=(ui:FrameworkElementExtensions.ActualWidth)}"
                            Comparison="LessThanOrEqual"
                            To="360"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="DynamicLayoutGrid.(ui:GridExtensions.ActiveLayout)" Value="Narrow"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>


        <Grid Grid.Row="1" Height="48">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="240" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Border
                x:Name="Resizer"
                ui:FrameworkElementExtensions.EnableActualSizeBinding="True"
                Background="{StaticResource Brush-Brand-Color}">
                <TextBlock TextWrapping="Wrap">
                    Resize to see the layout to be <LineBreak/>
                    switched dynamically.
                </TextBlock>
            </Border>
            <controls:GridSplitter
                HorizontalAlignment="Left"
                Grid.Column="1"
                Width="12"/>
        </Grid>

        <Grid
            Grid.Row="2"
            x:Name="DynamicLayoutGrid"
            ui:GridExtensions.ActiveLayout="Normal"
            ColumnSpacing="12"
            RowSpacing="8"
            BorderThickness="1"
            BorderBrush="{ThemeResource SystemControlHighlightChromeHighBrush}"
            HorizontalAlignment="Left"
            Width="{Binding ElementName=Resizer, Path=(ui:FrameworkElementExtensions.ActualWidth)}"
            Padding="8">
            <!-- Declaratively define the possible layouts. -->
            <!-- GridEx.Layouts is a dictionary of GridLayoutDefinition -->
            <ui:GridExtensions.Layouts>
                <ui:GridLayoutDefinition x:Key="Normal">
                    <!-- A GridLayoutDefinition consists of -->
                    <!-- row definitions, column definitions and an area definition -->
                    <ui:GridLayoutDefinition.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </ui:GridLayoutDefinition.RowDefinitions>
                    <ui:GridLayoutDefinition.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </ui:GridLayoutDefinition.ColumnDefinitions>
                    <!-- Area definition just simply puts down -->
                    <!-- children names in desired order -->
                    Number Title Description
                </ui:GridLayoutDefinition>
                <ui:GridLayoutDefinition x:Key="Narrow">
                    <ui:GridLayoutDefinition.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </ui:GridLayoutDefinition.RowDefinitions>
                    <ui:GridLayoutDefinition.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </ui:GridLayoutDefinition.ColumnDefinitions>
                    Number      Title; <!-- semicolon is used to separate differnt rows -->
                    Description Description <!-- row/column span is expressed by repeating the elment name -->
                </ui:GridLayoutDefinition>
            </ui:GridExtensions.Layouts>
            <Border x:Name="Number" Width="32">
                <TextBlock>1</TextBlock>
            </Border>
            <Border x:Name="Title">
                <TextBlock>Lorem Ipsum</TextBlock>
            </Border>
            <Border x:Name="Description">
                <TextBlock>Lorem ipsum dolor sit amet...</TextBlock>
            </Border>
        </Grid>
    </Grid>
</Page>