UWP 响应控件宽度变化

Question

我希望我的控件响应其宽度变化而不是 Window 宽度变化。我可以使用 VisualStateManager 或纯 xaml 来实现吗？

我能想到的一种可能的解决方案是使用 DataTriggerBehavior。例如：

<Interactivity:Interaction.Behaviors>
    <Interactions:DataTriggerBehavior Binding="{Binding Width, ElementName=PlaylistDataTemplateControl}" ComparisonCondition="Equal" Value="1000">
        <Interactions:ChangePropertyAction TargetObject="{Binding ElementName=AlbumTextBlock}" PropertyName="Visibility" Value="Collapsed"/>
    </Interactions:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>

我把它放在 PlaylistDataTemplateControl 但是当宽度改变时没有任何反应。

Answer 1

UWP 的默认触发器仅约 window。如果要在控件上实现触发，有两种方式。第一种是监听SizeChanged事件，第二种是自己写触发器

这是第一种情况：

xaml

<StackPanel>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Narrow">
                <VisualState.Setters>
                    <Setter Target="MyControl.Background" Value="White"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Width">
                <VisualState.Setters>
                    <Setter Target="MyControl.Background" Value="Blue"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <ContentControl x:Name="MyControl" Width="200" Height="100" SizeChanged="MyControl_SizeChanged"/>

    <Button Content="Change Width" x:Name="WidthButton" Click="WidthButton_Click"/>
</StackPanel>

xaml.cs

private void MyControl_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (e.NewSize.Width == 200)
    {
        VisualStateManager.GoToState(this, "Narrow", true);
    }
    else
    {
        VisualStateManager.GoToState(this, "Width", true);
    }
}

private void WidthButton_Click(object sender, RoutedEventArgs e)
{
    MyControl.Width = MyControl.Width == 300 ? 200 : 300;
}

这只是一个简单的例子。先在XAML中定义控件的VisualState，然后在SizeChanged事件中改变控件的状态，就可以达到你的目的。

如果你对自定义触发器感兴趣，可以参考这个Microsoft-provided example，里面有控件大小的触发器。

最佳成绩。

UWP 响应控件宽度变化

UWP respond to Control width change

c#

xaml

win-universal-app

uwp