2016-05-18 9 views
0

私は、ウィンドウが一定のサイズ以下になると、ボタンのサイズが小さくなるようにしようとしています。ここでUWP/WinRT:AdaptiveTriggerを使用してスタイルを変更できますか?

は私のスタイルのためのコードです:

<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton"> 
    <Setter Property="Width" Value="68"/> 
</Style> 

にはどうすればウィンドウが720ピクセル以下に低下すると、すべてのAppBarButtonsが64の幅になることができますか?

答えて

1

あなたの別の質問では、AppBarSeparatorsがPivotのDataTemplateで生成されています。

また、DataBindingを使用してこれを行うこともできます。また、実行時にウィンドウのサイズを変更できる場合は、INotifyPropertyChangedインターフェイスでデータソースクラスを完成させる必要があります。例えば

ここ:

<Page.Resources> 
    <local:WidthConverter x:Key="cvt" /> 
</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Pivot x:Name="docPivot" ItemsSource="{x:Bind pivotlist}" SizeChanged="docPivot_SizeChanged"> 
     <Pivot.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="auto" /> 
         <RowDefinition Height="auto" /> 
        </Grid.RowDefinitions> 
        <StackPanel Orientation="Horizontal" Grid.Row="0"> 
         <AppBarButton Background="Red" Icon="Accept" Label="Accept" Width="{Binding WindowWidth, Converter={StaticResource cvt}}" /> 
        </StackPanel> 
        <StackPanel Orientation="Horizontal" 
         Grid.Row="1"> 
        </StackPanel> 
       </Grid> 
      </DataTemplate> 
     </Pivot.ItemTemplate> 
    </Pivot> 
</Grid> 

他のものは、あなたの最後の質問で私の答えと同じです。そして、ここでWidthConverterは、このようなものです:

public class WidthConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     double? width = (double?)value; 
     if (width <= 720) 
      return 64; 
     return 68; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
     throw new NotImplementedException(); 
    } 
} 
+0

だから、スタイルを使用し、各項目ごとに個別に幅を処理するために必要だし、それははるかにそれを一緒に使用するすべての項目を変更するには、直接スタイルを変更することはできませんよりクリーンな方法? –

+0

@WilliamJones、私はこれを管理するためにここにきれいな方法を考えることができませんでした。多分もっと簡単な方法があるかもしれませんが、とにかくコードの背後にあるべきです。 –

1

あなたは、一般的にスタイルを設定することができます場合、これはわからない、十分に簡単であるべき、またはあなたがが名前の要素に制限されている場合ので、私は最初のことを行いますvisualstatemanagerを作成し、さらに私の選択肢を模索します:

<VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="WindowStates"> 
       <VisualState x:Name="WideState"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="720" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="Button1.Width" Value="100" />       
        </VisualState.Setters> 
       </VisualState> 
       <VisualState x:Name="NarrowState"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="Button1.Width" Value="68" /> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
    </Grid> 
</Page> 
関連する問題