適用於WPF自助服務終端觸摸屏應用程序的Viewbox的正確使用

Question

是否有某種用於爲自助服務終端觸摸屏創建正確GUI的「最佳實踐」手冊？這些應用程序需要在不同的屏幕分辨率下具有一致的外觀和感覺，更重要的是屏幕比例（因爲所有內容都以矢量形式呈現，所以屏幕分辨率和DPI不應該成爲WPF的問題）。

以我試圖爲觸摸屏創建簡單鍵盤爲例。我用UniformGrid使每個按鈕獲得同等大小的細胞：

下面是該代碼：這使得它們非

<TabItem Header="Test 1"> 
     <ItemsControl ItemsSource="{Binding KeyboardItems}" SnapsToDevicePixels="True"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Viewbox Margin="5"> 
         <Button Content="{Binding}"></Button> 
        </Viewbox> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <UniformGrid Columns="8" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
    </TabItem> 

注意，所有按鍵均設置爲內容所以每個按鈕都有自己的尺寸......這就是Viewbox如何擴展它的內容，當然這種GUI是沒有問題的。這不是我想要的一些自助服務應用程序使用鍵盤，所以下一次更好的版本如下：

<TabItem Header="Test 2"> 
     <ItemsControl ItemsSource="{Binding KeyboardItems}" SnapsToDevicePixels="True"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
         <Button Margin="5"> 
          <Viewbox> 
           <TextBlock Text="{Binding}" /> 
          </Viewbox> 
         </Button> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <UniformGrid Columns="8" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
    </TabItem> 

現在，這是因爲Viewbox控件好一點，現在包裹的內容，而不是整個按鈕。但請注意，因爲我們現在正在包裝按鈕的內容而不是整個按鈕，所以按鈕的邊框現在不會縮放。我希望這也能夠擴展，而不僅僅是內容。在第一個例子中，我們有這個，但GUI的整體外觀很糟糕。

另請注意，在此版本中，我已將Margin設置爲按鈕，並在Viewbox的第一個版本中設置了Margin。這意味着在第一個版本中，頁邊距也會縮放（我想要！），而在第二個版本中，它對於任何屏幕尺寸都將保持不變。因此，對於真正的大屏幕，按鈕之間的空白區域會變得相對較小，儘管它們絕對具有恆定的大小（不是我想要的！）。

這裏是生成鍵盤按鈕的代碼：

public partial class MainWindow : Window 
{ 
    public List<string> KeyboardItems { get; set; } 

    public MainWindow() 
    { 
     KeyboardItems = new List<string>(); 
     for (char c = 'A'; c <= 'Z'; c++) 
     { 
      KeyboardItems.Add(c.ToString()); 
     } 
     KeyboardItems.Add("Space"); 

     DataContext = this; 
     InitializeComponent(); 
    } 
} 

這樣的問題都是圍繞WPF觸摸屏售貨亭的發展，所以我想聽聽你來約在處理一些縮放想法和解決方案的問題。

Answer 1

你沒告訴我們測試3，我想可能是這樣的：

<TabItem Header="Test 3"> 
    <Viewbox> 
     <ItemsControl ItemsSource="{Binding KeyboardItems}" SnapsToDevicePixels="True"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
         <Button Margin="5"> 
          <TextBlock Text="{Binding}" /> 
         </Button> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <UniformGrid Columns="8" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
    </Viewbox> 
</TabItem> 

確實有預期的效果？