Question

我正在尝试这样做，以便当窗口低于一定大小时，按钮会缩小。

以下是我的Style的代码：

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

当窗口低于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是在Pivot的DataTemplate中生成的。

仍然可以使用DataBinding和Converter来执行此操作，如果窗口大小在运行时可以更改，您可能还需要使用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更改样式？

2 个答案: