UWP/WinRT: Is it possible to change a Style using an AdaptiveTrigger? - responsive-design

Question

I'm trying to make it so that when the window drops below a certain size, the buttons shrink in size.
Here is the code for my Style:
<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton">
<Setter Property="Width" Value="68"/>
</Style>
How can I cause all AppBarButtons to become 64 width when the window drops below 720 pixels?

Answer 1

We've discussed this in your another question, your AppBarSeparators are generated in the Pivot's DataTemplate.
Still you can use DataBinding with Converter to do this, and if the size of the window is changeable during the run-time, you may also need complete your data source class with INotifyPropertyChanged Interface.
For example here:
<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>
The other things are the same as my answer in your last question. And the WidthConverter here is like this:
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();
}
}

Answer 2

This should be easy enough, not sure if you can set styles generally, or if you are restricted to named elements though, so I would create a visualstatemanager that does that first, and then explore my options further:
<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>