0

カスタム ボタン用の最初の XAML テンプレートを作成しています (親切にお願いします)。また、一般的に発生するもの (ボタン アイコン) をセットアップに不可欠なものにしようとしています。

現在、私のテンプレートは次のとおりです。

<ControlTemplate TargetType="Button" x:Key="tButton">
    <Grid>
        <Border x:Name="Background" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
            <Grid Background="{TemplateBinding Background}">
                <Rectangle x:Name="BackgroundGradient" >
                </Rectangle>
            </Grid>
        </Border>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>

            <!-- icon image -->
            <Image Grid.Column="0" />

            <ContentPresenter
                            Grid.Column="1"
                            x:Name="contentPresenter"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}" />
        </Grid>
        <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>

これで、テキストと画像を設定する準備が整いました。テキスト部分も機能しますが、本当に気に入っているのは (そして、その方法がわかりません)、アイコンをボタンに渡すことです。

スタイリングで設定できるボタンのカスタム プロパティ (URI 用) を取得する方法を見つけようとしていましたが、それはすべて私の頭の上にありました (それと組み合わせると、そこに保持することがたくさんありました)このテンプレート全体を学習します）。それは有効なアプローチですか？たぶん、ボタンのコンテンツで見つかった画像をテンプレートに取得させ、示されているように使用させることができますか?

基本的に、すべてのボタンにアイコンを表示するオプションを標準化する方法はありますか? すべてのボタンに画像とテキストブロックを持たせ、それぞれに独自のコンテキスト依存のスタイルを設定するという厄介なソリューションよりもはるかに優れています。

最後に、(残念ながら) XAML にしかアクセスできません。やりたいことはほぼ何でもできますが、これは既存のパネルの再設計であり、C# の機能ビットにはアクセスできません。

4

2 に答える 2

2

アイコン ソースのプロパティを持つボタンを実装する

public class IconButton : Button
{
    public static readonly DependencyProperty IconSourceProperty =
        DependencyProperty.Register("IconSource", typeof(string), typeof(IconButton), new PropertyMetadata(default(string)));

    public string IconSource
    {
        get { return (string)GetValue(IconSourceProperty); }
        set { SetValue(IconSourceProperty, value); }
    }
}

そのボタンに合わせてテンプレートを調整し、画像ソースをカスタム プロパティにバインドします。

<ControlTemplate TargetType="{x:Type local:IconButton}" x:Key="tbutton">
<Grid>
    <Border x:Name="Background" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
        <Grid Background="{TemplateBinding Background}">
            <Rectangle x:Name="BackgroundGradient" >
            </Rectangle>
        </Grid>
    </Border>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>

        <!-- icon image -->
        <Image Grid.Column="0" Source="{TemplateBinding IconSource}"/>

        <ContentPresenter
                        Grid.Column="1"
                        x:Name="contentPresenter"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Margin="{TemplateBinding Padding}" />
    </Grid>
    <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>

そしてシンプルな使い方

<local:IconButton IconSource="Resources\1.jpg" Template="{StaticResource tbutton}"></local:IconButton>
于 2013-09-26T19:48:50.740 に答える