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

实际上，这真的很容易。使用您已有的样式并将以下内容添加到“图像”

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

然后（只要您将图像设置为内容/复制，如果较新）您可以使用所需图像的 Uri 设置内容。

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

注意：将 '[projectname]' 替换为您的项目名称，将 '...' 替换为图像的路径

于 2013-05-15T01:32:40.077 回答
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，我看不到您的边框。

直接在按钮上给出的内容被样式覆盖。

也许你的形象有问题？您是否将其构建属性设置为Resource？

于 2010-08-18T07:38:01.733 回答
0

我认为这样做的正确方法是

  1. 创建一个派生自 Button 的新自定义控件 ImageButton
  2. 在 ImageButton 中创建一个类型为“ImageSource”的 DP“ImageSource”，并以其样式将图像的源绑定到此 DP。

然后你可以像这样使用它<ImageButton ImageSource={StaticResource ...}/>

如果您尝试将资源中定义的图像添加到内容控件，它只会在第一次工作。第二次尝试将相同的图像添加到另一个内容控件时，它将失败并显示“指定的视觉对象已经是另一个视觉对象的子对象......”

于 2010-08-18T12:51:18.557 回答
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 回答