Question

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

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

我无法弄清楚WPF，为Windows创建占位符容器的最佳方法是什么。在上面的链接中，您可以看到所有页面（视图）都加载到自定义形状的窗口中。如何创建这样的可重用窗口？

我应该覆盖某些控件的模板吗？简而言之，我不确定创建自定义形状窗口的正确方法是什么，例如StaffLynx应用程序使用的窗口。

请告知。

Answer 1

也许您应该尝试使用ContentTemplateSelector。这是一个很好的example ..

这是我制作的一个可以适合您的场景的简单示例。我有一个带边框的窗口，边框内部是一个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属性，将调用此类中的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;
    }
  }

它看起来像这样：

Answer 2

哦，好吧，如果你只想要一个例子中的一个如何做那种事情。这是一个如何使用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>

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

2 个答案: