如何使用可视状态管理器 XAML 更改网格的属性

Question

我正在使用 C# 和 XAML 开发一个 Windows 通用应用程序。当我的应用在笔记本电脑上运行时，我想在这个名为 tabIcon 的网格视图中更改子网格的高度。

 <Grid Name="tabGrid" Width="700">
            <GridView  Name="SpecialtyGridView" HorizontalAlignment="Center" ItemsSource="{Binding Source={StaticResource SpecialtyCollectionViewSource}}" Grid.Row="2" SelectionMode="None" IsItemClickEnabled="True" ItemClick="SpecialtyGridView_ItemClick">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Margin="0,0,0,10" Orientation="Vertical" MaximumRowsOrColumns="4"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid Name="tabIcon"  Background="#21539E" Width="290" Height="140" Margin="5,0,5,8">
                            <TextBlock x:Name="SpecialityTextBlock" FontSize="26" Foreground="White" FontFamily="Segoe UI" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <Run Text="{Binding speciality}"/>
                            </TextBlock>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>

        </Grid>

我使用视觉状态触发器来执行此操作，但它不起作用。这是我的笔记本电脑触发代码。

        <VisualStateManager.VisualStateGroups>

        <VisualStateGroup>

            <VisualState x:Name="Phone">

                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth = "0"/>
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target = "HeaderGrid.Height"
                 Value = "90" />
                    <Setter Target = "Instruction.Visibility"
                 Value = "Collapsed" />
                    <Setter Target = "TheatreName.FontSize"
                 Value = "14" />
                    <Setter Target = "TheatreName.HorizontalAlignment"
                 Value = "Left" />
                    <Setter Target = "TheatreName.Margin"
                 Value = "0,40" />
                    <Setter Target = "PatientNameAndIDStackPanel.Margin"
                 Value = "10,0" />


                </VisualState.Setters>

            </VisualState>

            <VisualState x:Name="Tablets">

                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth = "720"  />
                </VisualState.StateTriggers>

                <VisualState.Setters>

                    <!--<Setter Target = "Body.Background"
                 Value = "Red" />-->
                </VisualState.Setters>

            </VisualState>
            <VisualState x:Name="Laptop">

                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth = "1024" />
                </VisualState.StateTriggers>

               <VisualState.Setters>
                    <Setter Target = "tabIcon.Height"
             Value = "60" />

                </VisualState.Setters>

            </VisualState>
            <VisualState x:Name="PCs">

                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth = "1400" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target = "Divider.Height"
                 Value = "80" />
                </VisualState.Setters>

            </VisualState>

        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

如果我将它用于名为 tabGrid 的网格，则此代码有效，但不适用于名为 tabIcon 的网格。我该怎么做才能让它发挥作用？

Answer 1

有什么理由，为什么只需要在 XAML 中执行此操作？

如果没有，只需制作两个 DataTemplate 并在页面或父网格的 SizeChanged 事件上更改它。

XAML

<Page SizeChanged="MainPage_OnSizeChanged">
<Page.Resources>
    <DataTemplate x:Key="LaptopTemplate">
        <Grid Background="#21539E" Width="290" Height="60" Margin="5,0,5,8">
            <TextBlock x:Name="SpecialityTextBlock" 
                       FontSize="26" Foreground="White" 
                       FontFamily="Segoe UI" 
                       VerticalAlignment="Center" 
                       HorizontalAlignment="Center">
                    <Run Text="{Binding speciality}"/>
            </TextBlock>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="DesktopTemplate">
        <Grid Name="tabIcon"  Background="#21539E" Width="290" Height="40" Margin="5,0,5,8">
            <TextBlock x:Name="SpecialityTextBlock" 
                       FontSize="26" 
                       Foreground="White" 
                       FontFamily="Segoe UI" 
                       VerticalAlignment="Center" 
                       HorizontalAlignment="Center">
                    <Run Text="{Binding speciality}"/>
            </TextBlock>
        </Grid>
    </DataTemplate>
</Page.Resources>

<GridView x:Name="SpecialtyGridView">
</GridView>
</Page>

代码隐藏

private void MainPage_OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (e.PreviousSize != e.NewSize)
        {
            if (MainPage.ActualWidth > 1024)
            {
                SpecialtyGridView.ItemTemplate = Resources["DesktopTemplate"] as DataTemplate;
            }
            else
            {
                SpecialtyGridView.ItemTemplate = Resources["LaptopTemplate"] as DataTemplate;
            }
        }
    }

编辑

或者你甚至可以在 VisualStateManager 中进行：

<VisualStateGroup>
      <VisualState x:Name="Laptop">
           <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
           </VisualState.StateTriggers>
           <VisualState.Setters>
                <Setter Target="SpecialtyGridView.ItemTemplate" Value="{StaticResource LaptopTemplate}" />
           </VisualState.Setters>
      </VisualState>
      <VisualState x:Name="Desktop">
           <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="1024" />
           </VisualState.StateTriggers>
           <VisualState.Setters>
                <Setter Target="SpecialtyGridView.ItemTemplate" Value="{StaticResource DesktopTemplate}" />
           </VisualState.Setters>
      </VisualState>
</VisualStateGroup>