web-dev-qa-db-ja.com

WPFのデフォルトテンプレートの一部を置き換えます

デフォルトのテンプレートの一部を置き換える「ベストプラクティス」の方法はありますか。現在のユースケースはツリービューです。デフォルトでは、ツリービューには、展開および折りたたむためのこの小さな三角形があります。

以下のコードに示すように、コントロールテンプレート全体を置き換える場合、これらを置き換える方法を知っています。 「すべてデフォルトのままにして、XYを変更するだけ」の方法があるかどうかはわかりません。それはスタイルではありません。基本的に、既存のコントロールテンプレートの一部を置き換える必要があります。

説明のために、次のXAMLを見てください。最初の小さなブロックは、適応できるようにしたい関連XAMLです。

大きい方の2番目と3番目の部分は基本的にデフォルトのテンプレートのコピーであり、最初から「変更された」部分を管理するためだけのものです。

これを行うためのより良い方法はありますか？後半に長くて混乱するXAMLを節約しますか？

        <ResourceDictionary 
      xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml" >





  <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
    <Setter Property="Focusable" Value="False"/>
     <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ToggleButton">
          <Grid
            Width="15"
            Height="13"
            Background="Transparent">
            <Path x:Name="ExpandPath"
              HorizontalAlignment="Left" 
              VerticalAlignment="Center" 
              Margin="1,1,1,1"
              Fill="Black"
              Data="M 4 0 L 8 4 L 4 8 Z"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsChecked"
                 Value="True">
              <Setter Property="Data"
                  TargetName="ExpandPath"
                  Value="M 0 4 L 8 4 L 4 8 Z"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type TreeViewItem}">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition MinWidth="19"
                    Width="Auto"/>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <ToggleButton x:Name="Expander"
                Style="{StaticResource ExpandCollapseToggleStyle}"
                IsChecked="{Binding Path=IsExpanded,
                            RelativeSource={RelativeSource TemplatedParent}}"
                ClickMode="Press"/>
        <Border Name="Bd"
            Grid.Column="1"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Padding="{TemplateBinding Padding}">
          <ContentPresenter x:Name="PART_Header"
                    ContentSource="Header"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
        </Border>
        <ItemsPresenter x:Name="ItemsHost"
                Grid.Row="1"
                Grid.Column="1"
                Grid.ColumnSpan="2"/>
      </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="IsExpanded"
             Value="false">
          <Setter TargetName="ItemsHost"
              Property="Visibility"
              Value="Collapsed"/>
        </Trigger>
        <Trigger Property="HasItems"
             Value="false">
          <Setter TargetName="Expander"
              Property="Visibility"
              Value="Hidden"/>
        </Trigger>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="HasHeader"
                   Value="false"/>
            <Condition Property="Width"
                   Value="Auto"/>
          </MultiTrigger.Conditions>
          <Setter TargetName="PART_Header"
              Property="MinWidth"
              Value="75"/>
        </MultiTrigger>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="HasHeader"
                   Value="false"/>
            <Condition Property="Height"
                   Value="Auto"/>
          </MultiTrigger.Conditions>
          <Setter TargetName="PART_Header"
              Property="MinHeight"
              Value="19"/>
        </MultiTrigger>
        <Trigger Property="IsSelected"
             Value="true">
          <Setter TargetName="Bd"
              Property="Background"
              Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
          <Setter Property="Foreground"
              Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
        </Trigger>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="IsSelected"
                   Value="true"/>
            <Condition Property="IsSelectionActive"
                   Value="false"/>
          </MultiTrigger.Conditions>
          <Setter TargetName="Bd"
              Property="Background"
              Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
          <Setter Property="Foreground"
              Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        </MultiTrigger>
        <Trigger Property="IsEnabled"
             Value="false">
          <Setter Property="Foreground"
              Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Setter.Value>
</Setter>
c#wpfcontroltemplate
33
Christian Ruppert

残念ながら、テンプレート全体を置き換える必要があると思います。

MSDNから： http://msdn.Microsoft.com/en-us/library/aa970773.aspx

Windows Presentation Foundation（WPF）のコントロールには、そのコントロールのビジュアルツリーを含むControlTemplateがあります。コントロールのControlTemplateを変更することにより、コントロールの構造と外観を変更できます。コントロールのビジュアルツリーの一部のみを置き換える方法はありません。コントロールのビジュアルツリーを変更するには、コントロールのTemplateプロパティを新しく完全なControlTemplateに設定する必要があります。

23
Page

実際には方法があります（一種の）。独自のカスタムコントロールを作成し、OnApplyTemplate関数をオーバーライドして、スタイルを動的に変更できます。

たとえば、次のようなカスタムコントロールを作成します（これはSilverlightで実行していますが、すべて同じだと思います）。

namespace SilverlightClassLibrary1
{
    public class MyButton: Button
    {
        public string BackgroundColor { get; set; }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            if (BackgroundColor != null)
            {
                Rectangle r = this.GetTemplateChild("BackgroundGradient") as Rectangle;

                if (r != null)
                {
                    r.Fill = new SolidColorBrush(Color.FromArgb(255, 
                        Convert.ToByte(BackgroundColor.Substring(1,2),16),
                        Convert.ToByte(BackgroundColor.Substring(3,2),16),
                        Convert.ToByte(BackgroundColor.Substring(5,2),16)));
                }
            }
        }
    }
}

興味深い部分はGetTemplateChildメソッドで、「BackgroundGradient」という名前のRectangleコントロールを探しています。 （ところで、別のプロジェクトでカスタムコントロールを定義する方が簡単なので、まだ作成していない場合は、新しい「Silverlightクラスライブラリ」プロジェクトを作成して、そのプロジェクトに配置します。）

次に、新しいリソースディクショナリファイルを追加し、コントロールテンプレートを上書きして、「BackgroundGradient」という名前の長方形があることを確認します。この場合、私が少し削減した標準のボタンコントロールテンプレートを使用しています。

<ResourceDictionary
    xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
    xmlns:custom="clr-namespace:SilverlightClassLibrary1;Assembly=SilverlightClassLibrary1">

    <Style TargetType="custom:MyButton">
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="Padding" Value="3"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                            <Grid Background="{TemplateBinding Background}"  Margin="1">
                                <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
                                <Rectangle x:Name="BackgroundGradient" Fill="White" >
                                </Rectangle>
                            </Grid>
                        </Border>
                        <ContentPresenter
                              x:Name="contentPresenter"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              Margin="{TemplateBinding Padding}"/>
                        <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                        <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

したがって、必要に応じて、ボタンコントロールを宣言し、スタイルをオーバーライドできるようになりました。

<UserControl x:Class="SilverlightApplication1.MainPage"
            ...
            xmlns:custom="clr-namespace:SilverlightClassLibrary1;Assembly=SilverlightClassLibrary1">

        <custom:MyButton>Normal Button 1</custom:MyButton>
        <custom:MyButton>Normal Button 2</custom:MyButton>

        <custom:MyButton BackgroundColor="#8888cc">Customized Background</custom:MyButton>

もっと賢くなり、リソース名またはスタイル名を渡して動的にロードできると思います。

次に、アプリケーションの一部としてリソースファイルを含める必要があります。

<Application xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml" 
             x:Class="SilverlightApplication1.App"
             >
    <Application.Resources>
        <ResourceDictionary >
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Dictionary1.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

xAMLデザイナでカスタムプロパティの変更が表示されます。

10
Rocklan

変更される要素のプレースホルダーとしてContentPresentersを使用して、テンプレートをカスタムコントロールとして再設計します。

これらのプレースホルダーを使用するには、それらを依存関係プロパティにリンクする必要があります。

これがどのように行われるかを確認するには、この投稿を確認してください

http://www.codeproject.com/Articles/82464/How-to-Embed-Arbitrary-Content-in-a-WPF-Control

「カスタムコントロールの使用」で私のアプローチを説明します

3
JavierIEH