uwp通用应用布局触发器AdaptiveTrigger

Posted 2020-11-07 maoriaty

MainPage.xaml

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <DataTemplate x:Key="dt1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Rectangle Fill="Red" Width="30" Height="30" Margin="6,4"/>
                <TextBlock Grid.Column="1" FontSize="18" Text="{Binding}"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="dt2">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Rectangle Fill="Red" Width="120" Height="120" Margin="5"/>
                <TextBlock Grid.Row="1" Margin="2" Text="{Binding}"/>
            </Grid>
        </DataTemplate>
        <ItemsPanelTemplate x:Key="ip1">
            <ItemsStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
        <ItemsPanelTemplate x:Key="ip2">
            <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"/>
        </ItemsPanelTemplate>
    </Page.Resources>

    <Grid>
        <ListView Name="lv" ItemTemplate="{StaticResource dt1}" ItemsPanel="{StaticResource ip1}">
            <x:String>item 1</x:String>
            <x:String>item 2</x:String>
            <x:String>item 3</x:String>
            <x:String>item 4</x:String>
            <x:String>item 5</x:String>
            <x:String>item 6</x:String>
        </ListView>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="lv.ItemTemplate" Value="{StaticResource dt2}"/>
                        <Setter Target="lv.ItemsPanel" Value="{StaticResource ip2}"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>