UWP/WinRT：是否可以使用 AdaptiveTrigger 更改样式？

Question

我正在尝试做到这一点，以便当 window 低于某个尺寸时，按钮会缩小。

这是我的样式代码：

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

当 window 低于 720 像素时，如何使所有 AppBarButtons 变为 64 宽度？

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

Answer 2

我们已经在你的另一个问题中讨论过这个问题，你的AppBarSeparators是在数据透视表的数据模板中生成的。

您仍然可以使用 DataBinding 和 Converter 来完成此操作，如果 window 的大小在运行期间可以更改，您可能还需要完成数据源 class 与 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();
    }
}

UWP/WinRT：是否可以使用 AdaptiveTrigger 更改样式？

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

responsive-design

windows-runtime

uwp