ビジュアルステートマネージャでグリッドのプロパティを変更する方法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でこれを行う必要がある理由は何ですか？

そうでない場合は、2つの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; 
      } 
     } 
    } 

EDIT

それともあなたも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>