wpf 在按钮中显示内容演示器中的图像

trnvg8h3  于 2022-12-19  发布在  其他
关注(0)|答案(4)|浏览(148)

我有一个按钮,它的样式在里面显示图像。我希望能够使用按钮上的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>
wnavrhmk

wnavrhmk1#

我很确定我没有理解你的问题,但是下面的代码对我很有效:

<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}"/>

图像显示出来了。但是,我看不到你的边框,因为不透明度属性设置为0。
直接在按钮上提供的内容会被样式覆盖。
也许你的图片有什么问题?你把它的build-property设置成Resource了吗?

f87krz0w

f87krz0w2#

我认为正确的做法是
1.创建从Button派生的新自定义控件ImageButton
1.在ImageButton中创建类型为“ImageSource”的DP“ImageSource”,并以其样式将图像源绑定到此DP。
然后可以像<ImageButton ImageSource={StaticResource ...}/>一样使用它
如果尝试将资源中定义的图像添加到内容控件,则仅在第一次时有效。第二次尝试将同一图像添加到另一个内容控件时,将失败,并显示“指定的视觉对象已经是另一个视觉对象的子级...”

4si2a6ki

4si2a6ki3#

实际上,这很简单。使用你已有的样式,在“image”中添加以下内容

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

然后(只要您将图像设置为Content/Copy if renewater),就可以使用所需图像的URI设置Content。

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

注意:用你的项目名替换'[projectname]'并用图像路径替换'...'

n6lpvg4x

n6lpvg4x4#

替换

<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}.../>

相关问题