Question

我是使用C＃的通用应用程序世界的新手，我试图使我的界面响应并在屏幕小于600时收到此消息：

是否可以使用触发器执行此操作？谢谢你的帮助

Answer 1

您可以在Windows 10中直接使用XAML。只需使用您的设计指定gridInstruction，并将其可见性设置为collapsed。现在使用基于屏幕宽度的自适应触发器将其可见性设置为可见或折叠。

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="WindowStates">
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="gridInstruction.Visibility" Value="Collapsed" />                        
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="gridInstruction.Visibility" Value="Visible" />                        
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

Answer 2

您可以为此创建自定义StateTrigger：

public enum LayoutStateType
{
    TooSmall, BigEnough
}

public class LayoutTrigger : StateTriggerBase
{
    public static readonly DependencyProperty MinimalStateWidthProperty = DependencyProperty.Register("MinimalStateWidth", typeof(double), typeof(LayoutTrigger), new PropertyMetadata(600.0, OnTriggerPropertyChanged));

    public static readonly DependencyProperty LayoutStateProperty = DependencyProperty.Register("LayoutState", typeof(LayoutStateType), typeof(LayoutTrigger), new PropertyMetadata(LayoutStateType.Landscape, OnTriggerPropertyChanged));

    public LayoutTrigger()
    {
        Window.Current.SizeChanged += Window_SizeChanged;
        UpdateTrigger();
    }

    public double MinimalStateWidth
    {
        get
        {
            return (double)GetValue(MinimalStateWidthProperty);
        }

        set
        {
            SetValue(MinimalStateWidthProperty, value);
        }
    }

    public LayoutStateType LayoutState
    {
        get
        {
            return (LayoutStateType)GetValue(LayoutStateProperty);
        }

        set
        {
            SetValue(LayoutStateProperty, value);
        }
    }

    private static void OnTriggerPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var trigger = d as LayoutTrigger;
        trigger.UpdateTrigger();
    }

    private void Window_SizeChanged(object sender, WindowSizeChangedEventArgs e)
    {
        UpdateTrigger();
    }

    private void UpdateTrigger()
    {
        switch (LayoutState)
        {
            case LayoutStateType.TooSmall:
                if (Window.Current.Bounds.Width <= MinimalStateWidth)
                {
                    SetActive(true);
                }
                else
                {
                    SetActive(false);
                }

                break;
            case LayoutStateType.BigEnough:
            default:
                if (Window.Current.Bounds.Width > MinimalStateWidth)
                {
                    SetActive(false);
                }
                else
                {
                    SetActive(true);
                }

                break;
        }
    }
}

您可以使用此状态触发器设置视觉状态。

XAML用法：

<Grid>
    <VisualStateManager.VisualStateGroups>
        <!--  Visual states reflect the application's view state  -->
        <VisualStateGroup x:Name="ApplicationViewStates">
            <VisualState x:Name="DefaultLayout">
                <VisualState.StateTriggers>
                    <triggers:LayoutTrigger LayoutState="TooSmall" />
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="PortraitLayout">
                <VisualState.StateTriggers>
                    <triggers:LayoutTrigger LayoutState="BigEnough" />
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid Style="{StaticResource LayoutRootStyle}">

在“太小”的视觉状态下，隐藏您想要隐藏的内容并显示您的消息

在调整应用程序大小时显示消息

2 个答案: