wpf - 如何在 WPF 中重用布局

Question

我正在尝试创建一个应用程序，该应用程序将被标记，其中每个选项卡都有一个按钮区域和一个 View 区域。

现在每个选项卡基本上都具有相同的布局，只是布局中的内容不同，我希望能够重用相同的布局，这样我就不必在很多地方进行更改(这只是不好的编程)。我可以使用资源或样式来完成此操作吗？

如果可能，请提供一个灯光代码示例。

编辑:我决定添加一个我正在尝试做的例子，因为我仍然没有得到它。

在每个 TabItem 下，我试图重新创建这个网格(它有点复杂，但你明白了):

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="200"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border Margin="10"
                            BorderBrush="{StaticResource MediumColorBrush}"
                            CornerRadius="10"
                            BorderThickness="2"
                            Grid.Row="0">

               <!-- First content goes here -->

        </Border>

        <Border Margin="10"
                            BorderBrush="{StaticResource MediumColorBrush}"
                            CornerRadius="10"
                            BorderThickness="2"
                            Grid.Row="1">

               <!-- Second content goes here -->

        </Border>

    </Grid>

如您所见，这两个边界也是相同的。现在我需要在我的评论所在的位置放置一些内容占位符。我不想在资源字典中声明这个网格布局，然后在我使用它的地方将单独的内容放入每个边框。

我可能有很多 TabItem，因此重复此代码不是一个好主意，并且每个 Tab 页面在 2 个占位符中都有不同的内容。

我可以使用

<ContentPresenter Content="{Binding}" />

事情，但仅针对 1 个内容，当有更多内容时会发生什么。

Answer 1

英戈，

代码始终在 MSDN 上可用。检查这个:UserControl , Custom controls , DataTemplates .

以下是每种方法的一些示例。为简单起见，让我们假设您要复制的布局是一行带有绿色前景的文本(实际上它可能真的不同，但您明白了)。

1.用户控制

Xaml:

<UserControl x:Class="WpfApplication1.GreenTextUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <TextBlock x:Name="txt" Foreground="Green"/>
</UserControl>

C#:

using System.Windows.Controls;

namespace WpfApplication1
{
  public partial class GreenTextUserControl : UserControl
  {
    public string Text
    {
      get { return txt.Text;}
      set { txt.Text = value; }
    }

    public GreenTextUserControl()
    {
      InitializeComponent();
    }
  }
}

选项卡控件 :

<TabControl>
  <TabItem Header="Tab 1">
    <loc:GreenTextUserControl Text="This is Tab 1"/>
  </TabItem>
  <TabItem Header="Tab 2">
    <loc:GreenTextUserControl Text="This is Tab 2"/>
  </TabItem>
  <TabItem Header="Tab 3">
    <loc:GreenTextUserControl Text="This is Tab 3"/>
  </TabItem>
</TabControl>

2.自定义控件

C#:

  public class GreenTextBlock : TextBlock
  {
    public GreenTextBlock()
    {
      Foreground = Brushes.Green;
    }
  }

选项卡控件:

<TabControl>
  <TabItem Header="Tab 1">
    <loc:GreenTextBlock Text="This is Tab 1"/>
  </TabItem>
  <TabItem Header="Tab 2">
    <loc:GreenTextBlock Text="This is Tab 2"/>
  </TabItem>
  <TabItem Header="Tab 3">
    <loc:GreenTextBlock Text="This is Tab 3"/>
  </TabItem>
</TabControl>

如果您的布局比文本 block 更复杂，自定义控件还允许您在 XAML 中定义它，但它与 UserControls 不同。

3. 数据模板

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:System="clr-namespace:System;assembly=mscorlib" 
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
    <x:Array x:Key="GreenText" Type="{x:Type System:String}">
      <System:String>This is Tab 1</System:String>
      <System:String>This is Tab 2</System:String>
      <System:String>This is Tab 3</System:String>
    </x:Array>

    <!--Tab item content data template-->
    <DataTemplate x:Key="GreenTextTemplate">
      <TextBlock Text="{Binding}" Foreground="Green"/>
    </DataTemplate>
  </Window.Resources>
    <Grid>
    <TabControl ItemsSource="{StaticResource GreenText}">
      <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
          <Setter Property="ContentTemplate" Value="{StaticResource GreenTextTemplate}"/>
        </Style>
      </TabControl.ItemContainerStyle>
    </TabControl>
  </Grid>
</Window>

就是这样 :)。希望能帮助到你。