4

内部に画像を表示するスタイルのボタンがあります。Contentボタンのプロパティ (またはその他の手段) を使用して、使用する画像を指定できるようにしたいと考えています。

実際にボタンに画像を直接ネストせずにこれを達成するにはどうすればよいでしょうか。

<BitmapImage x:Key="closeImage" UriSource="close.png" />

画像ファイル名を次のように指定できると思いました：

<Button Content="{{StaticResource closeImage}" x:Name="closeButton" Click="closeButton_Click" Style="{DynamicResource WindowToolboxButton}"/>

スタイル：

    <Style x:Key="WindowToolboxButton" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid" Height="15" Width="15">
                        <Border x:Name="border" CornerRadius="2,2,2,2" BorderBrush="#FFBBCDD2" BorderThickness="1" Opacity="0" Margin="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF82A3AC" Offset="1"/>
                                    <GradientStop Color="#7FCDD9DC"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                        <Image x:Name="image" Source="close.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >

                        </Image>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
4

4 に答える 4

0

私はあなたの質問の問題を見逃していると確信していますが、次のコードは私のために機能します：

<Window.Resources>
 <Image x:Key="test" Source="/Images/ChangeCase.png"/>
</Window.Resources>

<!-- Using a Resource for the Content -->
<Button Width="100" Height="20" Content="{StaticResource test}"/>

<!-- Specifying the Content directly -->
<Button Width="100" Height="20">
 <Image Source="/Images/ChangeCase.png"/>
</Button>

さらに、コードにエラーが見つかりました。

<Button Content="{{StaticResource closeImage}" [...]

する必要があります：

<Button Content="{StaticResource closeImage}" [...]

あなたのスタイルが何をしているのかよくわかりません。スタイルを介して画像を指定するときに、ContentプロパティをStaticResourceに設定するのはなぜですか？

編集：

さて、私はあなたのスタイルを試しました、そしてそれは私のためにも働きます。

   <Style x:Key="WindowToolboxButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid" Height="15" Width="15">
                        <Border x:Name="border" CornerRadius="2,2,2,2" BorderBrush="#FFBBCDD2" BorderThickness="1" Opacity="0" Margin="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF82A3AC" Offset="1"/>
                                    <GradientStop Color="#7FCDD9DC"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                        <Image x:Name="image" Source="/Images/ChangeCase.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

  <Button Width="100" Height="20" Content="Test" Style="{DynamicResource WindowToolboxButton}"/>

画像が表示されます。ただし、opacity-propが0に設定されているため、境界線が表示されません。

ボタンに直接表示されるコンテンツは、スタイルによって上書きされます。

たぶんあなたのイメージにsthが間違っていますか？そのビルドプロパティをリソースに設定しましたか？

于 2010-08-18T07:38:01.733 に答える
0

これを行う正しい方法は

  1. Button から派生する新しいカスタム コントロール ImageButton を作成します。
  2. ImageButton に「ImageSource」タイプの DP「ImageSource」を作成し、そのスタイルで画像のソースをこの DP にバインドします。

次に、次のように使用できます<ImageButton ImageSource={StaticResource ...}/>

リソースで定義された画像をコンテンツ コントロールに追加しようとすると、初回のみ機能します。同じ画像を別のコンテンツ コントロールに 2 回追加しようとすると、「指定されたビジュアルは既に別のビジュアルの子です...」で失敗します。

于 2010-08-18T12:51:18.557 に答える
0

実は、これはとても簡単です。既に持っているスタイルを使用して、以下を「image」に追加します

Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"

次に（新しい場合はコンテンツ/コピーとして設定された画像がある限り）、目的の画像のUriでコンテンツを設定できます。

<Button Content="/[projectname];component/.../close.png" Style="{StaticResource WindowToolboxButton}" ... />

注: '[projectname]' をプロジェクトの名前に置き換え、'...' をイメージへのパスに置き換えます

于 2013-05-15T01:32:40.077 に答える
0

交換

<Image x:Name="image" Source="close.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >

と

<Image x:Name="image" Source="{Binding Content, RelativeSource={RelativeSource AncestorType=Button}" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >

あなたの祖先のタイプは、xaml で呼び出されるそのボタンになります。そこで、そのボタンのコンテンツを設定して、いくつかの画像を指すことができます。

例：

<cc:customButton  Content={StaticResource someImage}.../>
于 2017-03-15T12:32:40.813 に答える