1

ボタンのテンプレートを作成したいと思います。このボタンに画像 (左側) とテキストを配置したいと思います。

私はそのようなものを作ろうとしました：

<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>
            <Label>
                <Label.Content>Fichiers joints</Label.Content>
                <Label.Foreground>white</Label.Foreground>
                <Label.VerticalAlignment>center</Label.VerticalAlignment>
                <Label.HorizontalAlignment>center</Label.HorizontalAlignment>
            </Label>
            <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>
    </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>

スタックパネルが追加された私のコードは次のとおりです。

 <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>

残念ながら、画像しか表示されず、テキストは表示されませんか? 誰にもアイデアがありますか？

ありがとう

4

3 に答える 3

5

たぶん、もっと簡単なことを試すことができます：

<Button>
<StackPanel Orientation="Horizontal">
    <Image Source="yourimage.jpg" />
    <TextBlock>Button content</TextBlock>
</StackPanel>
</Button>
于 2013-03-01T08:32:28.257 に答える
1

次のように、2 つの要素を 1 つの要素にラップするだけです。StackPanel

例：

<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>
</ControlTemplate>
于 2013-02-28T21:47:35.803 に答える
0

内部に画像を含むボタンを作成すると、境界線が見苦しくなりますが、これは避けるべきです。回避策は、イメージのイベントを作成することです。

たとえばOnMouseOver、ボタンを新しい画像、テキスト、テキスト付きの画像、または実際に選択したものに切り替えるイベントを作成できます。

OnClick画像がボタンであるかのようにタスクを実行するようにトリガーできるイベントを作成することもできます。

このような状況で私が行ったことは、カスタムボタンのように見える画像を作成してから、同じ画像を作成し、その周りに境界線が表示されるように変更することでした.

画像を切り替えるための OnMouseOver を作成し (縁取りされた画像が表示されるように)、必要な機能を実行するための OnClick を作成しました。

このテンプレートは、カスタム ボタンを使用するその他の状況で使用できます。

お役に立てれば！

于 2013-02-28T21:48:22.630 に答える