0

その中にボタンがあるカスタムメイドのユーザーコントロールがあります。このコントロールを使用するさまざまな XAML がありますが、XAML の 1 つで、ボタンに画像を表示したいと考えています。これはうまくいきますが、ボタンの境界線を消すことができないようです。背景色、境界線の太さ、およびその他のさまざまなプロパティを設定できますが、何をしても境界線を取り除くことはできません。スタイルを使用してテンプレートをオーバーライドする方法について、さまざまなSOトピックを見てきましたが、それも役に立たないようです。以下は、私が無駄にしようとした最後のスニペットです。

<Style TargetType="{x:Type CustomButton}" x:Key="btnnoborder">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CustomButton}">
                <Border Background="Transparent">
                    <ContentPresenter/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

編集

これらのスニペットをテストしたときに表示される小さな画像を添付しました

デフォルトの画像(通常のボタン)

ヴィクトール・ラ・クロワ(Viktor La Croix の XAML を使用した後のボタン)

4

2 に答える 2

1

私はこれに答えるつもりはありませんでしたが、あなたはそれを実行しましたか？設計時だけではないのですか？私はあなたのスタイルを使用しました、そしてそれはうまくいきます。実行時に境界線はありません。デザイン時に、ボタン自体の境界線とそのボタン内の画像が表示されます。

ここに画像の説明を入力してください

私のカスタムスタイル：

    <UserControl.Resources>
    <Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Rectangle/>
                        <ContentPresenter HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="11,7,0,9"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True"/>
                        <Trigger Property="IsDefaulted" Value="True"/>
                        <Trigger Property="IsMouseOver" Value="True"/>
                        <Trigger Property="IsPressed" Value="True"/>
                        <Trigger Property="IsEnabled" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

    <Button Style="{StaticResource ButtonStyle2}" Height="30" HorizontalAlignment="Left" Margin="782,211,0,0" Name="button5" VerticalAlignment="Top" Width="129">
        <Image Source="image.png"/>
    </Button>

カスタムスタイルでは、次のようになります。

ここに画像の説明を入力してください

しかし、それは設計時だけです。実行時に境界線はありません。

編集

ボーダーブラシがある場合。それはそのボタンスタイルの範囲内ではありません。

于 2012-11-26T15:36:06.700 に答える
0

投稿したコメントを改善するには、プロパティBorderBrushとBorderThicknessプロパティをTemplateBinding値に設定します。

<Style TargetType="{x:Type CustomButton}" x:Key="btnnoborder">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CustomButton}">
                <Border Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

これにより、ボタンが宣言されているインスタンスから値を継承できるようになります。

<local:CustomButton BorderBrush="Transparent" BorderThickness="0" Content="Click Me!"/>
于 2012-11-26T15:25:37.810 に答える