如何在 WPF 中设计自定义样式 window？

Question

我是 WPF 新手，主要有 Winforms 和 Webforms 经验。我正在尝试学习 WPF，我正在尝试学习的一件事是在 XAML 中创建漂亮的 UI。我一直在尝试复制 StaffLynx 应用程序的 UI。屏幕截图显示在这里

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

我无法在 WPF 中找到为 windows 创建占位符容器的最佳方法。在上面的 link 中，您可以看到所有页面（视图）都以自定义形状 window 加载。我怎样才能像这样创建一个可重复使用的 window ？

我应该只覆盖某些控件的模板吗？简而言之，我不确定创建自定义形状 window（例如 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..

这是我制作的一个简单示例，可能适合您的情况。我有一个带有边框的 window，边框内是一个 ContentControl，它有一个模板选择器，可以让您选择要显示的视图。

视图如下：

看看 local: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 属性，将调用此 class 中的 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;
    }
  }

它看起来像这样：

如何在 WPF 中设计自定义样式 window？

How to design custom styled window in WPF?

c#

wpf

xaml

wpf-controls