如何使用可視狀態管理器更改網格的屬性XAML

我正在開發使用C＃和XAML的Windows通用應用程序。當我的應用程序在筆記本電腦上運行時，我想在這個名爲tabIcon的gridview中更改我的子網格的高度。如何使用可視狀態管理器更改網格的屬性XAML

<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的網格不起作用。我能做些什麼才能使這個工作？

來源

2016-06-21 john bishop

你能向我們展示使用VisualState的代碼？ – lokusking

它有你不能看到它 –

哇...編輯代碼，然後這是pertly ..非常成熟-.-但我仍然不知道如何應用樣式/ ControlTemplate – lokusking

是否有任何理由，爲什麼只需要在XAML中執行此操作？

如果不是，只需製作兩個DataTemplates並將其更改爲頁面或父網格的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>

來源

2016-06-21 09:17:50

如何使用可視狀態管理器更改網格的屬性XAML

回答

相關問題