Добавить изображение эллипса на кнопку

Question

Я хочу добавить изображение эллипса на Button. Но когда я добавляю изображение на Button, Background цвет Button теряется. Что я могу сделать ?

<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>

Ищу:

Но результат:

Answer 1

Элементы управления Wpf не выглядят.

Это означает, что они имеют фиксированное поведение, но переменную "look".Этот переменный вид обрабатывается с помощью шаблонов.Установка шаблона элемента управления полностью меняет его.

Ваша разметка заменяет рамку и другие элементы, которые обычно составляют кнопку с эллипсом.У него нет фона, чтобы показать фон.

Эта бесшабашная природа элементов управления wpf довольно странная, если вы занимались какой-либо другой разработкой.Вы можете прочитать это объясненное любое количество раз и все еще не «понять» последствия.

Эта статья предназначена, чтобы помочь новичкам в этом:

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

Обратите внимание на всю разметку, которая является обычным шаблоном управления для кнопки.

Трудно понять, что вы собираетесь делать с этой кнопкой.

Если вы собираетесь использовать ее длямного кнопок с разными изображениями и т. д., то вы должны либо подклассить кнопку и добавить свойства зависимостей, либо определить класс с прикрепленными свойствами.В любом случае вы, вероятно, захотите, чтобы шаблон использовал эти свойства зависимостей, чтобы можно было связать источник изображений.

Способ работы с шаблоном элемента управления заключается в извлечении шаблона по умолчанию.(Приведенная выше ссылка объясняет, как это сделать).Взгляните на шаблон, который он вам дает.Любые именованные части необходимо как-то сохранить, иначе вы рискуете потерять функциональность.Как говорит Крис, кнопка - это управление контентом, и вам нужен где-то в новом шаблоне предъявитель контента, если вы все еще хотите, чтобы какой-либо контент работал.

У вас, похоже, нет контента, так что, возможно, у вас нетЭто нужно.

Еще одним осложнением здесь является тот эллипс, который как бы торчит вверх, где обычно можно ожидать, что кнопка заканчивается.Для этого вам нужно оставить место в макете, где вы используете кнопку или применяете довольно продвинутые приемы.

Вы можете вставить эллипс в слой декоратора и поверх любого другого содержимого окна.

Или

Вы можете быстро и грязно.

У меня нет вашей фотографии, поэтому я просто установил заливку эллипса красным здесь:

    <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, вы обычно используете TextBlock в wpf.Метка wpf не эквивалентна метке в других технологиях.

Answer 2

Если у вас есть шаблон, и вы хотите, чтобы шаблон отображал дополнительное содержимое, указанное в целевом элементе управления, вам необходимо включить ContentPresenter в шаблон, чтобы указать, где в шаблоне должно отображаться содержимое.В пределах ControlTemplate это должно быть помещено в Grid или подобное.Вам также нужно будет переместить градиентный фон и т. Д. В шаблон, поскольку шаблон полностью берет на себя рендеринг целевого элемента управления.

Если это кнопка с одним выключением, просто переместите рендеринг в * 1006.* element.