在按钮上添加椭圆图像答案

【问题标题】：Add Ellipse image on button在按钮上添加椭圆图像
【发布时间】：2019-05-12 14:35:27
【问题描述】：

我想在Button 上添加椭圆图像。但是当我在Button 上添加图像时，Button 的Background 颜色丢失了。我能做些什么？

<Button Height="80" Width="130" 
                    BorderThickness="0">
                <Label Content="Stephen King" FontFamily="Gabriola" FontSize="20"
                       Margin="0,30,0,0"></Label>
                <Button.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="CornerRadius" Value="20"/>
                    </Style>
                </Button.Resources>

                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Ellipse Height="70" Width="70" Grid.Column="1">
                            <Ellipse.Fill>
                                <ImageBrush ImageSource="/Icons/stephen.jpg"/>
                            </Ellipse.Fill>
                        </Ellipse>
                    </ControlTemplate>
                </Button.Template>

                <Button.Background>

                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

                        <GradientStop Color="#26C885" Offset="0" />

                        <GradientStop Color="#109489" Offset="1.0" />

                    </LinearGradientBrush>

                </Button.Background>
            </Button>

想要：

但是结果：

【问题讨论】：

标签： c# wpf xaml

【解决方案1】：

Wpf 控件不美观。

这意味着它们具有固定的行为，但“外观”是可变的。该变量外观由模板处理。设置控件的模板会完全改变它的本质。

您的标记替换了通常用椭圆构成按钮的边框和内容。它没有背景显示背景。

如果您进行过任何其他开发，wpf 控件的这种不美观的特性会有点奇怪。您可以多次阅读它的解释，但仍然无法“理解”其中的含义。

本文旨在帮助初学者：

https://social.technet.microsoft.com/wiki/contents/articles/29866.aspx

注意那里的所有标记，这是按钮的常规控件模板。

很难弄清楚你打算用这个按钮做什么。

如果您要将它用于具有不同图片等的许多按钮，那么您应该将按钮子类化并添加依赖属性或定义带有附加属性的类。无论哪种情况，您都可能希望模板使用这些依赖属性，以便绑定图像源。

处理控件模板的方法是提取默认模板。（上面的链接解释了如何做到这一点）。仔细看看它给你的模板。任何命名的部分都需要以某种方式保留，否则您可能会失去功能。正如 Chris 所说，该按钮是一个内容控件，如果您仍然希望任何内容正常工作，您需要在新模板中的某个地方添加一个内容展示器。

您似乎没有任何内容，所以也许您不需要。

这里的另一个复杂情况是椭圆有点突出您通常期望按钮结束的位置的顶部。您需要在使用按钮或使用相当先进技术的布局中留出空间。

您可以将椭圆推入装饰器装饰层和任何其他窗口内容的顶部。

或者

你可以快速而肮脏。

我没有你的照片，所以我只是在这里将椭圆填充设置为红色：

    <Button Height="90"
            Width="200">
        <Button.Resources>
            <Style TargetType="{x:Type Border}">
                <Setter Property="CornerRadius" Value="20"/>
            </Style>
        </Button.Resources>
        <Button.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                <GradientStop Color="#26C885" Offset="0" />
                <GradientStop Color="#109489" Offset="1.0" />
            </LinearGradientBrush>
        </Button.Background>
        <Grid>
            <Ellipse Height="60"
                     Width="60"
                     Fill="Red"
                     >
                <Ellipse.RenderTransform>
                     <TranslateTransform Y="-40" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <TextBlock Text="Stephen King" 
                       FontFamily="Gabriola" 
                       FontSize="20"
                       Margin="0,30,0,0"/>
        </Grid>
    </Button>

rendertransform 将椭圆向上推出控件。

将其粘贴到窗口中，然后旋转。

将鼠标悬停在按钮上。

注意（边框的）背景在鼠标悬停时变为浅蓝色，作为视觉提示用户这是他们可以点击的按钮。

这仍然有效，因为我没有替换按钮的模板。

还要注意 TextBlock 的使用。

在 winforms 或 html 中使用标签的地方通常在 wpf 中使用 TextBlock。 wpf 标签不等同于其他技术中的标签。

【讨论】：

【解决方案2】：

如果您有一个模板，并且希望模板呈现目标控件中指定的其他内容，则需要在模板中包含ContentPresenter 以指定应在模板中呈现内容的位置。在ControlTemplate 中，这需要放在Grid 或类似名称中。您还需要将渐变背景等移动到模板中，因为模板完全接管了目标控件的呈现。

如果这是一次性按钮，那么只需将您的渲染移动到 Button.Content 元素中。

【讨论】：