Landscape-Portrait orientation in WPF

问题

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?

回答1:

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>
   

回答2:

Yes, you can implement both of this UI and use VisualStateManager to control which UI to display.

Also you can bind visibility of layout container to your property using converter

来源：https://stackoverflow.com/questions/27712110/landscape-portrait-orientation-in-wpf