5

ボタンに画像とラベルを表示するためのボタン テンプレートを作成したいと思います。ボタンに水平スタックパネルを使用することを考えています。

ラベルを表示できません。

ここに私のテンプレートがあります:

<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte">
<Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" >
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <Border CornerRadius="3">
                <ContentPresenter/>
                <Border.Style>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="Background" Value="#58585a" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>
            <Label>
                <Label.Content>Fichiers joints</Label.Content>
                <Label.Foreground>white</Label.Foreground>
                <Label.VerticalAlignment>center</Label.VerticalAlignment>
                <Label.HorizontalAlignment>center</Label.HorizontalAlignment>
            </Label>
        </StackPanel>
    </Button.Content>
    <Button.Style>
        <Style TargetType="{x:Type Button}" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}" >
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

このテンプレートの呼び出しは次のとおりです。

<Grid Margin ="10,180,10,14">
            <Button Template="{StaticResource BoutonImageEtTexte}" HorizontalAlignment="Left" Margin="13,0,0,0"> 
                <Image Source="ToolBar_FicJoints.png" />
            </Button>
        </Grid>

Label の代わりに Textbox を使用する別のメソッドを次に示します。 

    <ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte">
    <Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" >
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Border CornerRadius="3">
                    <ContentPresenter/>
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="Background" Value="#58585a" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                </Border>
                    <TextBlock Text="LabelText" />
                </StackPanel>
        </Button.Content>
        <Button.Style>
            <Style TargetType="{x:Type Button}" >
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}" >
                            <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>
</ControlTemplate>

私の問題は、テンプレートで指定されたラベルではなく、画像のみが表示されることです。誰でも私を助けてくれますか？

どうもありがとう ：）

4

2 に答える 2

12

TextBlockは、ラベルよりもニーズに適合します。追加のラベル機能（ターゲット、オブジェクトコンテンツなど）を使用しない場合は、適切な'oleTextBlockを使用してください。

すべてのボタンのスタイル設定を無効にし、ボタンに画像とラベルのみを含める場合（これにより、マウスオーバー/マウスダウン効果が無効になりますが、トリガーでロジックを提供できます）：

<ControlTemplate TargetType="{x:Type Button}" x:Key="SimpleButton">
    <ContentPresenter/>
</ControlTemplate>

使用法：

<Button Template="{StaticResource SimpleButton}"> 
    <StackPanel Orientation="Horizontal">
        <Image Source="ToolBar_FicJoints.png" />
        <TextBlock Text="LabelText" />
    </StackPanel>
</Button>

通常のスタイルのボタンでImage/TextBlockが必要な場合は、さらに簡単です。

<Button> 
    <StackPanel Orientation="Horizontal">
        <Image Source="ToolBar_FicJoints.png" />
        <TextBlock Text="Fichiers joints" />
    </StackPanel>
</Button>
于 2013-03-01T21:23:22.053 に答える
3

次のようにキャンバスを使用します。

<Button Height="50" Width="150" >
                        <Button.Template>
                            <ControlTemplate>
                                <Canvas>
                                    <Image Source="./Images/Cancel.png"/>
                                    <TextBlock Canvas.Left="22" Canvas.Top="8" Text="Cancel" FontFamily="Arial" FontSize="18"/>
                                </Canvas>
                            </ControlTemplate>
                        </Button.Template>
                     </Button>

Canvas.Left要件に応じて調整できCanvas.Topます。画像の上にTextblockが表示されるので、これがお役に立てば幸いです。

于 2013-03-21T05:58:24.827 に答える