7

各タブにボタン領域とビュー領域があるタブ付きのアプリケーションを作成しようとしています。

これで、各タブは基本的にレイアウトが異なるだけで同じレイアウトになり、多くの場所で変更する必要がないように同じレイアウトを再利用できるようにしたかった (プログラミングがうまくいかない)。リソースまたはおそらくスタイルを使用してこれを達成できますか?

可能であれば、軽いコードの例を提供してください。

編集:私はまだそれを取得していないので、私がやろうとしていることの例を追加することにしました.

各 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 がある可能性があるため、このコードを繰り返すのは得策ではなく、各タブ ページの 2 つのプレースホルダーに異なるコンテンツが含まれます。

私は使用することができます

<ContentPresenter Content="{Binding}" />

1つのコンテンツだけですが、それ以上になるとどうなりますか.

4

2 に答える 2

5

インゴ、

コードは常に MSDN で入手できます。これを確認してください：UserControl、Custom controls、DataTemplates。

以下に、各アプローチの例をいくつか示します。簡単にするために、複製したいレイアウトが前景が緑色の 1 行のテキストであると仮定しましょう (実際にはまったく異なる場合がありますが、おわかりいただけると思います)。

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>

レイアウトが textblock よりも複雑な場合、カスタム コントロールを使用して 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>

それでおしまい ：）。それが役に立てば幸い。

于 2010-06-09T11:14:19.623 に答える
3

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>
于 2010-06-10T02:17:13.247 に答える