Landscape-Portrait orientation in WPF

Question

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?

Answer 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> 

Answer 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