0

簡単に言えば、コントロール テンプレートを WPF アプリケーションに追加する方法を教えてください。.net 4 で Visual Studio 2010 を使用しています。

以下にいくつかの質問を示します。

1) 私の理解によると、カスタム テンプレートは、コントロールの既に定義されている既定の設定を再定義するために使用されるものです。この場合、私は正しいですか？

2) ツール ボックスからドラッグ アンド ドロップするたびにボタンに画像を表示する場合は、ボタンの XAML コードをどこかでオーバーライドする必要があります。

たとえば、プログレス バーのあり方を再定義するコントロール テンプレート コードを以下に示します。

【１．スタック オーバーフローの簡単な例] WPF プログレスバー スタイル

<ControlTemplate x:Key="CustomProgressBar" TargetType="ProgressBar" >
    <Grid Name="TemplateRoot" SnapsToDevicePixels="True">
        <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
        <Border CornerRadius="0,0,0,0" Margin="1,1,1,1">
            <Border.Background>
                <SolidColorBrush Color="Transparent"/>                       
            </Border.Background>
        </Border>
        <Border BorderThickness="0,0,0,0" BorderBrush="Transparent" Margin="1,1,1,1">
            <Border.Background>
                <SolidColorBrush Color="Transparent"/>                        
            </Border.Background>
        </Border>
        <Rectangle Name="PART_Track" Margin="1,1,1,1" />
        <Decorator Name="PART_Indicator" Margin="1,1,1,1" HorizontalAlignment="Left">
            <Grid Name="Foreground">
                <Rectangle Fill="Transparent" Name="Indicator" />
                <Grid Name="Animation" ClipToBounds="True">
                    <Border Name="PART_GlowRect" Width="100"  Margin="0,0,0,0" HorizontalAlignment="Left" Background="LightBlue"/>                                                            
                </Grid>
                <Grid Name="Overlay">                         
                </Grid>
            </Grid>
        </Decorator>
        <Border BorderThickness="0" CornerRadius="0,0,0,0" BorderBrush="Transparent" />
    </Grid>           
</ControlTemplate>

また、カスタム コントロールを作成してみました。[プロジェクト] -> [新規] -> [カスタム コントロール] を選択すると、VS-2010 は Customcontrol.cs と customcontroldesigner.cs の 2 つのファイルを生成します。その後どうすればいいですか？（画像付きのボタンが必要だと言うので、常に）。

ありがとう。

4

1 に答える 1

1

(1) コントロールテンプレート

MSDN から ( source ):

「ControlTemplate を使用すると、コントロールの視覚的構造を指定できます。コントロールの作成者はデフォルトの ControlTemplate を定義でき、アプリケーションの作成者は ControlTemplate をオーバーライドして、コントロールの視覚的構造を再構築できます。」

xaml でコントロール テンプレートを自分で作成するか、Expression Blend を使用してコピーを作成し、既存のテンプレートを編集して上書きすることができます。

(2) ボタンテンプレート

ボタンの既定のコントロール テンプレートは次のとおりです。

<ControlTemplate TargetType="{x:Type Button}">
      <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
       <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="true">
        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonHoverBorder}"/>
        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
       </Trigger>
       <Trigger Property="IsKeyboardFocused" Value="true">
        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonHoverBorder}"/>
        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
       </Trigger>
       <Trigger Property="IsPressed" Value="true">
        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonPressedBorder}"/>
        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonPressed}"/>
       </Trigger>
       <Trigger Property="IsEnabled" Value="false">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>

異なるコンテンツを表示するように変更するには、border/presenter タグの近くにアイテムを追加/変更します。画像は直接コンテンツをサポートしていないため、次のように書くことはできません:

            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                <Image Source="/project;component/Images/image.png">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Image>
            </Border>

(3) 画像を含むボタンを含むコントロールを作成する

これを行うには、UserControl以下のような画像付きのボタンを作成して追加します。

<UserControl x:Class="ImageButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Button >
            <Image Source="/project;component/Images/image.png"></Image>
        </Button>
    </Grid>
</UserControl>

これにより、ツールボックスからドラッグできるイメージを含むコントロールが作成されます。画像ソースは明らかに静的な値ですが、コードで変更したり、クラスにパス パラメーターを渡したり、それにアクセスするためのプロパティを作成したりできます。

于 2012-08-30T14:18:18.273 に答える