基於屏幕分辨率的wpf多視圖

Question

優化在屏幕上顯示圖像的方式我需要設計兩個視圖，檢測屏幕比例（4：3或16：9及以上）並在它們之間切換。

在4：3的屏幕上的內容應當豎向顯示（按行）這樣的：

---

toolbars 25% 
---------------- 
image 
---------------- 
toolbars 25% 
---------------- 

在16：9的顯示器水平（由列）這樣的：

t | i | t 
o | m | o 
o | a | o 
l | g | l 
b | e | b 
a |  | a 
r |  | r 
s |  | s 
    |  | 

屏幕比例檢測完成。 我試圖與視覺狀態管理器和datatemplate切換視圖，但我不能結束這個谷歌搜索適當的'標準'的解決方案。

任何指導方針？

Answer 1

這應該做的工作，以及我想。有一些編碼留給你雖然

用法：

<Window x:Class="ResponsiveWpfLayout.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:responsiveWpfLayout="clr-namespace:ResponsiveWpfLayout" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <responsiveWpfLayout:ResponsiveLayout> 
      <responsiveWpfLayout:ResponsiveLayout.DefaultTemplate> 
       <ControlTemplate> 
        <Border Background="Red"> 
         <TextBlock>Layout A</TextBlock> 
        </Border> 
       </ControlTemplate> 
      </responsiveWpfLayout:ResponsiveLayout.DefaultTemplate> 
      <responsiveWpfLayout:ResponsiveLayout.AlternativeTemplate> 
       <ControlTemplate> 
        <Border Background="Green"> 
         <TextBlock>Layout B</TextBlock> 
        </Border> 
       </ControlTemplate> 
      </responsiveWpfLayout:ResponsiveLayout.AlternativeTemplate> 
     </responsiveWpfLayout:ResponsiveLayout> 

    </Grid> 
</Window> 

ResponsiveLayout.cs

public class ResponsiveLayout : Control 
    { 
     static ResponsiveLayout() 
     { 
      DefaultStyleKeyProperty.OverrideMetadata(typeof(ResponsiveLayout), new FrameworkPropertyMetadata(typeof(ResponsiveLayout))); 
     } 

     public static readonly DependencyProperty DefaultTemplateProperty = DependencyProperty.Register(
      "DefaultTemplate", typeof (ControlTemplate), typeof (ResponsiveLayout), new PropertyMetadata(default(ControlTemplate))); 

     public ControlTemplate DefaultTemplate 
     { 
      get { return (ControlTemplate) GetValue(DefaultTemplateProperty); } 
      set { SetValue(DefaultTemplateProperty, value); } 
     } 

     public static readonly DependencyProperty AlternativeTemplateProperty = DependencyProperty.Register(
      "AlternativeTemplate", typeof (ControlTemplate), typeof (ResponsiveLayout), new PropertyMetadata(default(ControlTemplate))); 

     public ControlTemplate AlternativeTemplate 
     { 
      get { return (ControlTemplate) GetValue(AlternativeTemplateProperty); } 
      set { SetValue(AlternativeTemplateProperty, value); } 
     } 

     public static readonly DependencyProperty ActiveTemplateProperty = DependencyProperty.Register(
      "ActiveTemplate", typeof (ControlTemplate), typeof (ResponsiveLayout), new PropertyMetadata(default(ControlTemplate))); 

     public ControlTemplate ActiveTemplate 
     { 
      get { return (ControlTemplate) GetValue(ActiveTemplateProperty); } 
      set { SetValue(ActiveTemplateProperty, value); } 
     } 

     protected override Size ArrangeOverride(Size arrangeBounds) 
     { 
      if (arrangeBounds.Width > arrangeBounds.Height) 
      { 
       ActiveTemplate = DefaultTemplate; 
      } 
      else 
      { 
       ActiveTemplate = AlternativeTemplate; 
      } 

      return base.ArrangeOverride(arrangeBounds); 
     } 

     public ResponsiveLayout() 
     { 
      ActiveTemplate = DefaultTemplate; 
     } 
    } 

Generic.xaml

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:ResponsiveWpfLayout"> 


    <Style TargetType="{x:Type local:ResponsiveLayout}"> 
     <Setter Property="DefaultTemplate"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Border Background="Orange"> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="AlternativeTemplate"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Border Background="Blue"> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type local:ResponsiveLayout}"> 
        <Border Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}"> 
         <ContentControl Template="{TemplateBinding ActiveTemplate}"></ContentControl> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary>