如何在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; 
    } 
    } 

它看起来象是这样的：