So ändern Sie die Eigenschaften eines Rasters mit dem visuellen Statusmanager XAML

Question

Ich entwickle eine universelle Windows-Anwendung mit C# und XAML. Wenn meine App auf einem Laptop ausgeführt wird, möchte ich die Höhe meines untergeordneten Rasters in dieser Rasteransicht namens tabIcon ändern.

<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> 

Ich benutze einen visuellen Zustand Trigger, dies zu tun, aber es funktioniert nicht. Hier ist mein Trigger-Code für Laptop.

 <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> 

Dieser Code funktioniert, wenn ich es für das Netz namens tabGrid verwenden, aber funktioniert nicht für das Netz namens tabIcon. Was kann ich tun, damit dies funktioniert?

Answer 1

Gibt es einen Grund, warum Sie dies nur in XAML tun müssen?

Wenn nicht, machen Sie einfach zwei DataTemplates und ändern Sie diese beim SizeChanged-Ereignis Ihrer Seite oder Ihres übergeordneten Rasters.

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> 

-Code-behind

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

Oder Sie können es tun, auch in Visual:

<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>