在WPF风景人像方向 [英] Landscape-Portrait orientation in WPF

查看:170
本文介绍了在WPF风景人像方向的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是新来WPF和动态视图创建工作。我有一种情况,我需要根据显示器横向和/或纵向,如修改我的UI



我已经有属性,它告诉我,显示器处于横向或纵向模式。



这是可能的在WPF?


解决方案

这是可能的。您可以创建一个实现使用DataTrigger它们之间既布局和交换机的视图:

 <&ContentControl中GT; 
< ContentControl.Style>
<风格的TargetType =ContentControl中>
< setter属性=内容>
< Setter.Value>
<! - 把你的纵向布局在这里 - >
< /Setter.Value>
< /二传手>
< Style.Triggers>
< DataTrigger绑定={结合IsLandscape}VALUE =真>
< setter属性=内容>
< Setter.Value>
<! - 把你的景观布置在这里 - >
< /Setter.Value>
< /二传手>
< / DataTrigger>
< /Style.Triggers>
< /样式和GT;
< /ContentControl.Style>
< / ContentControl中>



使用{结合IsLandscape}的表情,DataTrigger观察视图的DataContext的IsLandscape财产。 中对此有详细MSDN上解释。这意味着,你应该将这个视图的DataContext属性设置为有你已经在你的问题中提到的IsLandscape属性的对象。完整的例子:




  1. 创建新的空的WPF项目


  2. <。 p>更新 MainWindow.xaml.cs

     公共主窗口( )
    {
    this.InitializeComponent();

    this.DataContext =这一点; //使用MVVM设计模式
    }

    公共静态只读的DependencyProperty IsLandscapeProperty
    = DependencyProperty.Register(IsLandscape,
    typeof运算时,你会在这里放一个视图模型(布尔),
    typeof运算(主窗口));

    公共BOOL IsLandscape
    {
    {返回(布尔)的GetValue(IsLandscapeProperty); }
    集合{的SetValue(IsLandscapeProperty,值); }
    }

    私人无效ChangeOrientation(对象发件人,RoutedEventArgs E)
    {
    this.IsLandscape = this.IsLandscape!;
    }


  3. 更新 MainWindow.xaml 。删除默认的网格,并把这个代替:

     < Window.Resources> 
    <风格的TargetType =用户控件>
    < setter属性=Horizo​​ntalContentAlignmentVALUE =中心/>
    < setter属性=VerticalContentAlignmentVALUE =中心/>
    < setter属性=背景VALUE =#CCDDEE/>
    < setter属性=保证金VALUE =3/>
    < /样式和GT;
    < /Window.Resources>

    <&DockPanel中GT;

    <按钮DockPanel.Dock =底保证金=5CONTENT =更改方向
    点击=ChangeOrientation/>

    <&ContentControl中GT;
    < ContentControl.Style>
    <风格的TargetType =ContentControl中>
    < setter属性=内容>
    < Setter.Value>
    <网格和GT;
    < Grid.ColumnDefinitions>
    < ColumnDefinition />
    < ColumnDefinition />
    < /Grid.ColumnDefinitions>
    < Grid.RowDefinitions>
    < RowDefinition />
    < RowDefinition />
    < /Grid.RowDefinitions>

    <用户控件CONTENT =1分/>
    <用户控件Grid.Column =1CONTENT =2分/>
    <用户控件Grid.Row =1Grid.ColumnSpan =2CONTENT =主/>
    < /网格和GT;
    < /Setter.Value>
    < /二传手>
    < Style.Triggers>
    < DataTrigger绑定={结合IsLandscape}VALUE =真>
    < setter属性=内容>
    < Setter.Value>
    <网格和GT;
    < Grid.ColumnDefinitions>
    < ColumnDefinition />
    < ColumnDefinition />
    < /Grid.ColumnDefinitions>
    < Grid.RowDefinitions>
    < RowDefinition />
    < RowDefinition />
    < /Grid.RowDefinitions>

    <用户控件Grid.Column =1CONTENT =1分/>
    <用户控件Grid.Column =1Grid.Row =1CONTENT =2分/>
    <用户控件Grid.RowSpan =2CONTENT =主/>
    < /网格和GT;
    < /Setter.Value>
    < /二传手>
    < / DataTrigger>
    < /Style.Triggers>
    < /样式和GT;
    < /ContentControl.Style>
    < / ContentControl中>

    < / DockPanel中>



I am new to WPF and working on dynamic view creation. I have a scenario where i need to modify my UI based on monitor landscape and/or portrait, like

I already have property which tells me that monitor is in landscape or portrait mode.

Is this possible in WPF?

解决方案

This is possible. You would create a view that implements both layouts and switches between them using a DataTrigger:

<ContentControl>
    <ContentControl.Style>
        <Style TargetType="ContentControl">
            <Setter Property="Content">
                <Setter.Value>
                    <!-- Put your portrait layout here -->
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsLandscape}" Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <!-- Put your landscape layout here -->
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>        
</ContentControl>

Using the {Binding IsLandscape} expression, the DataTrigger observes the IsLandscape property of the view's DataContext. This is explained in detail on MSDN. This means that you should set the view's DataContext property to the object that has the IsLandscape property that you've mentioned in your question. Full example:

  1. Create new empty WPF project.

  2. Update your MainWindow.xaml.cs:

    public MainWindow()
    {
        this.InitializeComponent();
    
        this.DataContext = this; // You would put a ViewModel here when using MVVM design pattern
    }
    
    public static readonly DependencyProperty IsLandscapeProperty
        = DependencyProperty.Register("IsLandscape",
                                        typeof (bool),
                                        typeof (MainWindow));
    
    public bool IsLandscape
    {
        get { return (bool) GetValue(IsLandscapeProperty); }
        set { SetValue(IsLandscapeProperty, value); }
    }
    
    private void ChangeOrientation(object sender, RoutedEventArgs e)
    {
        this.IsLandscape = !this.IsLandscape;
    }
    

  3. Update your MainWindow.xaml. Delete the default Grid and put this instead:

    <Window.Resources>
        <Style TargetType="UserControl">
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Background" Value="#CCDDEE" />
            <Setter Property="Margin" Value="3" />
        </Style>
    </Window.Resources>
    
    <DockPanel>
    
        <Button DockPanel.Dock="Bottom" Margin="5" Content="Change Orientation"
                Click="ChangeOrientation" />
    
        <ContentControl>
            <ContentControl.Style>
                <Style TargetType="ContentControl">
                    <Setter Property="Content">
                        <Setter.Value>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
    
                                <UserControl Content="Sub 1" />
                                <UserControl Grid.Column="1" Content="Sub 2" />
                                <UserControl Grid.Row="1" Grid.ColumnSpan="2" Content="Main" />
                            </Grid>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsLandscape}" Value="True">
                            <Setter Property="Content">
                                <Setter.Value>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition />
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
    
                                        <UserControl Grid.Column="1" Content="Sub 1" />
                                        <UserControl Grid.Column="1" Grid.Row="1" Content="Sub 2" />
                                        <UserControl Grid.RowSpan="2" Content="Main" />
                                    </Grid>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    
    </DockPanel>
    

这篇关于在WPF风景人像方向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆