Question

我正在尝试创建一个应用选项卡，其中每个选项卡都有一个按钮区域和一个视图区域。

现在每个选项卡在布局中基本上具有相同的布局，我希望能够重用相同的布局，这样我就不必在很多地方进行更改（这不是很好的编程）。我可以使用资源或样式完成此任务。

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

编辑：我已经决定添加一个我正在尝试做的例子，因为我还没有得到它。

在每个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>

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

我可能有很多TabItems，所以重复这段代码并不是一个好主意，每个Tab页面在2个占位符中都有不同的内容。

我可以使用

<ContentPresenter Content="{Binding}" />

但仅限于1个内容，当会有更多内容时会发生什么。

Answer 1

TabItem是一个ContentControl，它允许任何子内容，但也允许模板化内容，这正是您尝试做的事情。您可以使用这样的DataTemplate来执行共享布局。 ContentPresenter是每个TabItem的不同内容的占位符。

<DataTemplate x:Key="ButtonViewerTemplate">
    <DockPanel>
        <Button DockPanel.Dock="Bottom" Content="OK"/>
        <Button DockPanel.Dock="Bottom" Content="Cancel"/>
        <Border Background="Aqua" BorderBrush="Red" BorderThickness="2" Padding="5">
            <ContentPresenter Content="{Binding}" />
        </Border>
    </DockPanel>
</DataTemplate>

要使用模板，只需将其设置为每个TabItem的ContentTemplate。这适用于从ContentControl派生的任何内容。

<TabControl>
    <TabItem ContentTemplate="{StaticResource ButtonViewerTemplate}" Header="Some Buttons">
        <UniformGrid>
            <Button Content="XXXXX"/>
            <Button Content="XXXXX"/>
            <Button Content="XXXXX"/>
            <Button Content="XXXXX"/>
        </UniformGrid>
    </TabItem>
    <TabItem ContentTemplate="{StaticResource ButtonViewerTemplate}" Header="All Blue">
        <Border Background="Blue" MinHeight="50"/>
    </TabItem>
    <TabItem ContentTemplate="{StaticResource ButtonViewerTemplate}" Header="Image">
        <Image Source="http://i.msdn.microsoft.com/Platform/Controls/StoMastheadMSDN/resources/logo_msdn.png"/>
    </TabItem>
</TabControl>

Answer 2

Ingo，

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：

<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>

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

第3。的DataTemplate

<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>  <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>

就是这样:)。希望它有所帮助。

如何在WPF中重用布局

2 个答案: