如何在WPF中設計自定義樣式的窗口？

Question

我是WPF的新手，主要是Winforms和Webforms體驗。我正在嘗試學習WPF，並且我正試圖學習的一件事是在XAML中創建漂亮的用戶界面。我一直在嘗試複製StaffLynx應用程序的UI。的屏幕截圖在座

http://nextver.com/site/portfolio/stafflynx/

在WPF我想不通，會是怎樣創造的窗口中的佔位符容器的最佳途徑。在上面的鏈接中，您可以看到所有頁面（視圖）都被加載到自定形狀的窗口中。我怎樣才能創建一個這樣的可重用窗口？

我應該重寫一些控件的模板嗎？ 總之，我不確定什麼是正確的方式來創建一個自定義形狀的窗口，如StaffLynx應用程序使用的窗口。

請指教。

Answer 1

噢，好吧，如果你只是想要很多例子之一如何做這樣的事情。下面是一個簡單的例子，說明如何使用Clip來削減這個角落，給它一個鏡頭。希望能幫助到你。

<Window x:Class="NestedCutCornerWindowCWSO" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="NestedCutCornerWindowCWSO" Height="500" Width="800"> 

    <Grid Height="350" Width="500"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <Rectangle Fill="Navy" 
        Clip="M0,0 L485,0 500,15 500,100 0,100 z"/> 

     <TextBlock Foreground="White" FontSize="20" Text="Something" Margin="5"/> 

     <Rectangle Grid.Row="1" 
        Fill="White" 
        Stroke="Navy" StrokeThickness="2"/> 

     <TextBlock Grid.Row="1" Foreground="Black" FontSize="30" 
        HorizontalAlignment="Center" VerticalAlignment="Center" 
        Text="Some Other Stuff..."/> 
    </Grid> 

</Window> 

Answer 2

也許你應該嘗試使用ContentTemplateSelector。這裏有一個很好的example ..

下面是一個簡單的例子，我做了適合您的場景。我有一個有邊框的窗口，邊框內有一個ContentControl，它有一個模板選擇器，可以讓你選擇要顯示的視圖。

這裏的觀點：

看看當地：MyContentTemplateSelector標籤。

<Window x:Class="WpfApplication2.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:WpfApplication2" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
    <Grid.Resources> 
     <DataTemplate x:Key="FirstTemplate"> 
     <TextBlock Text="First" /> 
     </DataTemplate> 
     <DataTemplate x:Key="SecondTemplate"> 
     <TextBlock Text="Second" /> 
     </DataTemplate> 
     <local:MyContentTemplateSelector FirstTemplate="{StaticResource FirstTemplate}" SecondTemplate="{StaticResource SecondTemplate}" 
             x:Key="mytemplateSelector" /> 
    </Grid.Resources> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <Border BorderThickness="1" BorderBrush="Red" Grid.Row="0"> 
     <ContentControl ContentTemplateSelector="{StaticResource mytemplateSelector}" Content="{Binding SelectedViewModel}"/> 
    </Border> 
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"> 
     <Button Command="{Binding SelectFirstViewModel}">Go to First Template</Button> 
     <Button Command="{Binding SelectSecondViewModel}">Go to Second Template</Button> 
    </StackPanel> 
    </Grid> 
</Window> 

這裏的視圖模型：

public class MainVm : ViewModelBase 
    { 
    private FirstVm _FirstViewModel; 
    public FirstVm FirstViewModel 
    { 
     get { return _FirstViewModel; } 
     set { Set(ref _FirstViewModel, value); } 
    } 

    private SecondVm _SecondViewModel; 
    public SecondVm SecondViewModel 
    { 
     get { return _SecondViewModel; } 
     set { Set(ref _SecondViewModel, value); } 
    } 


    private ViewModelBase _SelectedViewModel; 
    public ViewModelBase SelectedViewModel 
    { 
     get { return _SelectedViewModel; } 
     set { Set(ref _SelectedViewModel, value); } 
    } 

    public ICommand SelectFirstViewModel 
    { 
     get 
     { 
     return new RelayCommand(() => { this.SelectedViewModel = FirstViewModel; }); 
     } 
    } 

    public ICommand SelectSecondViewModel 
    { 
     get 
     { 
     return new RelayCommand(() => { this.SelectedViewModel = SecondViewModel; }); 
     } 
    } 

    public MainVm() 
    { 
     FirstViewModel = new FirstVm(); 
     SecondViewModel = new SecondVm(); 
     SelectedViewModel = this.FirstViewModel; 
    } 
    } 

這些可能是你有你的網頁的任何視圖模型：

public class FirstVm : ViewModelBase 
    { 

    } 

    public class SecondVm : ViewModelBase 
    { 

    } 

而這裏的模板選擇。這是重要的部分。無論何時您更改ContenControl的內容，在這種情況下，內容都會綁定到MainVm的SelectedViewmodel屬性，此類中的SelectTemplate方法將被調用。這就是你放置視圖或數據模板顯示的邏輯的地方。

public class MyContentTemplateSelector : DataTemplateSelector 
    { 
    public DataTemplate FirstTemplate { get; set; } 
    public DataTemplate SecondTemplate { get; set; } 
    public override DataTemplate SelectTemplate(object item, DependencyObject container) 
    { 
     if (item is FirstVm) 
     return FirstTemplate; 
     if (item is SecondVm) 
     return SecondTemplate; 
     return null; 
    } 
    } 

它看起來象是這樣的：