Кастомная кнопка в UserControl или UserControl со свойствами кнопки

@Ахромчон · Регистрация: 01.09.2019

Студворк — интернет-сервис помощи студентам

Привет,

пытаюсь запихнуть кастомную кнопку в Useк Control. Что-то ерунда какая-то получается.
Можете помочь?

Хотелось бы UC со свойствами кнопки. Чтобы при клике меняла цвет своего Fill. и чтобы handle event был и binding работал, Также, от прилетаещего bool меняла свой Fill.

Спасибо!

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<UserControl x:Class="Button_testing.UserControls.Polygon_Button"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Button_testing.UserControls"
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="100">
    <Grid>
 
 
       
        <Button Name="button1" Height="90" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="90"
     Content="No content">
 
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Margin="5">
                        <Ellipse Stroke="DarkBlue" StrokeThickness="2">
                            <Ellipse.Fill>
                                <RadialGradientBrush Center="0.3,0.2" RadiusX="0.5" RadiusY="0.5">
                                    <GradientStop Color="Azure" Offset="0.1" />
                                    <GradientStop Color="CornflowerBlue" Offset="1.1" />
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
 
                        <ContentPresenter Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
 
                    </Grid>
                </ControlTemplate>
 
            </Button.Template>
        </Button>
 
    </Grid>
</UserControl>

@Ахромчон · 13.09.2019, 20:34 **[ТС]**

Элд Хасп, а вы пробовали когда-нибудь сделать

самоблокирующийся триггер IsPressed?

@Элд Хасп · 13.09.2019, 21:29

Сообщение от Ахромчон

а вы пробовали когда-нибудь сделать
самоблокирующийся триггер IsPressed?

А что это такое?
Главное чтобы был алгоритм (а не просто название) - сделать можно что угодно.

@Ахромчон · 13.09.2019, 21:36 **[ТС]**

Сообщение от Элд Хасп

А что это такое?

пример.

1. Button в статическом положении. background = LightGray, border = DarkGray.

2. Button кликнули PressedBackground = Red, PressedBorder = Black. Цвета остаются пока еще раз не кликнут.

3. Button еще раз кликнули - статическое состояние как в п.1

Только не говорите что это элементарно.

@Элд Хасп · 13.09.2019, 23:02

Сообщение от Ахромчон

пример.

В WPF очень легко меняется внешний (визуальный) вид контрола.
Поэтому в WPF контролы выбираются по ПОВЕДЕНИЮ.
Для Button поведение это (в том числе) сохранять состояние нажатия только пока нажата кнопка мыши.

То что вам нужно это другое поведение. И такому поведению соответствует контрол ToggleButton.

Элементарно, мой дорогой Ватсон, элементарно!

@Ахромчон · 14.09.2019, 12:41 **[ТС]**

Сообщение от Элд Хасп

Элементарно, мой дорогой Ватсон, элементарно!

Холмс, не знаю как у вас в студии 2019. У меня в ToolBox ее нет, хотя WPF ее "знает" если пишешь <ToggleButton>.

XML
1
2
3
4
5
6
 <ToggleButton
       x:Name="TestToggle"
       Grid.Row="0"
       Grid.Column="0"
       Margin="3.5,1,3.5,3.5"
       Content="ON" Checked="TestToggle_Checked" Unchecked="TestToggle_Unchecked">

Code behind,

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 private void TestToggle_Checked(object sender, RoutedEventArgs e)
        {
            
 
            TestToggle.Content = "ON";
            TestToggle.Background = Brushes.DarkGreen;
            // TestToggle.Background = Brushes.Red;
 
        }
 
 
        private void TestToggle_Unchecked(object sender, RoutedEventArgs e)
        {
           
    
            TestToggle.Content = "OFF";
           TestToggle.Background = Brushes.DarkGray; 
 
        }

В состояние Unchecked можно подобрать идентичный цвет совпадающий со default стилем кнопки. Но это как вы говорите костыль. Как сделать получше что-ли?

@Элд Хасп · 14.09.2019, 13:08

Сообщение от Ахромчон

В состояние Unchecked можно подобрать идентичный цвет совпадающий со default стилем кнопки. Но это как вы говорите костыль. Как сделать получше что-ли?

Для WPF стандартный способ задания внешнего вида элементам - это стили и шаблоны.

Пример

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        <ToggleButton>
            <ToggleButton.Style>
                <Style TargetType="ToggleButton">
                    <Setter Property="Background" Value="Red"/>
                    <Style.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" Value="Green"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
            <ToggleButton.Template>
                <ControlTemplate>
                    <Border Background="{TemplateBinding Background}"/>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

Сообщение от Ахромчон

У меня в ToolBox ее нет, хотя WPF ее "знает" если пишешь <ToggleButton>.

Я даже не знаю, что у меня есть в WPF ToolBox.
У меня эта панель убрана с экрана.

Добавлено через 6 минут
Более развитый пример

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
        <ToggleButton>
            <ToggleButton.Style>
                <Style TargetType="ToggleButton">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="Content" Value="Выключено"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Style.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" Value="Green"/>
                            <Setter Property="Content" Value="Включено"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter Content="{TemplateBinding Content}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          />
                    </Border>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

@Ахромчон · 14.09.2019, 13:15 **[ТС]**

ОК, а не нарушая текущий стиль?

default background -не изменяется.

IsChecked background -да.

@Элд Хасп · 14.09.2019, 13:24

Сообщение от Ахромчон

ОК, а не нарушая текущий стиль?

А какой стиль текущий?

Добавлено через 1 минуту
Так?

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
        <ToggleButton>
            <ToggleButton.Style>
                <Style TargetType="ToggleButton">
                    <!--<Setter Property="Background" Value="Red"/>-->
                    <Setter Property="Content" Value="Выключено"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Style.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" Value="Green"/>
                            <Setter Property="Content" Value="Включено"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter Content="{TemplateBinding Content}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          />
                    </Border>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

@Ахромчон · 14.09.2019, 13:53 **[ТС]**

Сообщение от Элд Хасп

А какой стиль текущий?

текущий стиль это, когда:

XML
1
<ToogleButton  Width ="100" Height ="50"/>

Где только нужно переопределить background в состоянии IsChecked.

@Элд Хасп · 14.09.2019, 14:06

Сообщение от Ахромчон

Где только нужно переопределить background в состоянии IsChecked.

Уже показал выше

@Ахромчон · 14.09.2019, 14:56 **[ТС]**

На mahapp не работает. У вас же есть мой проектик с mahapp ? Как оставить в живых весь стиль mahapp. И переопределить только Background IsChecked?

F4 -property я не вижу настроек Background isСhecked.

@Элд Хасп · 14.09.2019, 15:43

Ахромчон, я далеко от компа

@Элд Хасп · 14.09.2019, 17:29

Сообщение от Ахромчон

На mahapp не работает. У вас же есть мой проектик с mahapp ?

Работает без проблем.
Или я не пойму что вы хотите сделать...

Сообщение от Ахромчон

И переопределить только Background IsChecked?
F4 -property я не вижу настроек Background isСhecked.

Невозможно переопределить цвета нажатия, наведения курсора не переопределив шаблон элемента.
В дефолтном шаблоне эти цвета заданы константами и они не доступны из вне.

В Win7 (и возможно в Win 8.0) дефолтные шаблоны были иными и эти цвета задавались в системных кистях.
Начиная с Win 8.1 были изменены дефолтные шаблоны и они задаются константами внутри шаблона.

Здесь возникает ещё один нюанс в который я пока глубоко не вникал.
Дефолтные шаблоны элементов определяются не Net платформой, а системой на которой запускается приложение.
Поэтому одно и тоже приложение уже после компиляции может выглядеть по разному в разных ОС.
А вот в том как менять эти дефолтные шаблоны я не разбирался.
Но , вроде, их можно изменять, так применение тем, по-моему, работает через их изменение.
Но точно как оно всё устроено я не знаю.

Это одна из причин, по которой если вы создаёте приложение запускаемое на разных ОС и вам нужно самому полностью контролировать вид тех или иных контролов, то шаблоны всех этих контролов надо переопределять на уровне App.
Делать это надо именно через словарь шаблонов, а не через UC. Реализация UC для такого через чур затратна.
Даже в созданном мною UC ButtonPolygon сам UC должен быть без шаблона. Шаблон должен быть в отдельном словаре который подключается к App.

Но здесь я тоже ещё не совсем разобрался. Если объявить дефолтные шаблоны на уровне приложения, то как потом делать производные от него стили? Мне приходится делать их через наследование, но это костыль. А как установить в стиле одно свойство не трогая других я не знаю.

Вот допустим в таком примере

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
        <Grid.Resources>
            <Style TargetType="ToggleButton">
                <Setter Property="Background" Value="Red"/>
            </Style>
        </Grid.Resources>
        <ToggleButton>
            <ToggleButton.Style>
                <Style TargetType="ToggleButton">
                    <!--<Setter Property="Background" Value="Red"/>-->
                    <Setter Property="Content" Value="Выключено"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Style.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" Value="Green"/>
                            <Setter Property="Content" Value="Включено"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter Content="{TemplateBinding Content}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          />
                    </Border>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

Из-за объявления стиля в кнопке Background возвращается в серый цвет.
Хотя выше в стиле он объявлен красным.
Как сделать стили работающие аналогично дефолтным я не знаю.

@Ахромчон · 14.09.2019, 18:30 **[ТС]**

Сообщение от Элд Хасп

Как сделать стили работающие аналогично дефолтным я не знаю.

Холмс, я тут тоже не спал и кое-что нарыл. То что надо! Делюсь как не убить текущий прекрасный стиль, и переопределить ТОЛЬКО ЧТО НУЖНО.

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <ToggleButton x:Name="Manual_btn"  Margin="290,237,153.4,45.4" Checked="Manual_btn_Checked" Unchecked="Manual_btn_Unchecked">
 
            <ToggleButton.Style>
                <Style BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="{x:Type ToggleButton}">
                    
                <Setter Property="Content" Value="Выключено"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
 
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" Value="Green"/>
                        <Setter Property="Content" Value="Включено"/>
                    </Trigger>
 
                </Style.Triggers>
 
                    </Style>
 
            </ToggleButton.Style>
        </ToggleButton>

Вот эта строчка решила все!

XML
1
<Style BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="{x:Type ToggleButton}">

У меня теперь другой вопрос!

В отдельную тему напишу.

@Элд Хасп · 14.09.2019, 19:12

Сообщение от Ахромчон

Вот эта строчка решила все!

Это называется наследованием стилей.
За это я вам уже писал

Сообщение от Элд Хасп

Но здесь я тоже ещё не совсем разобрался. Если объявить дефолтные шаблоны на уровне приложения, то как потом делать производные от него стили? Мне приходится делать их через наследование, но это костыль. А как установить в стиле одно свойство не трогая других я не знаю.

Мне не нравится явное прописывание базового стиля. Но как обойтись без этого - не знаю.
Не знаю даже возможно это или нет.

Кроме того для этого надо знать действующий стиль на данном уровне. А это далеко не всегда бывает дефолтный системный.
Шаблоны элементов устанавливаются на уровне App и если задать им наследование от базового системного шаблона, то стили ниже по уровню не смогут на него влиять.

Ниже пример.
В ресурсах окна определён нужный нам стиль с шаблоном для переключателя (ToggleButton). Обычно такой шаблон бывает ещё выше - в словаре подключенном к App.
Цвет фона выключенной кнопки в нём не установлен.
В контейнере Grid я устанавливаю для всех переключателей цвет фона красным. Но переключатель с нашим стилем не подхватывает этот красный цвет.
Переключатель же без стиля подхватывает. То есть мы получаем разное поведение там где это нам не нужно.
Приходится за этим специально следить.

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    <Window.Resources>
        <Style TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}" x:Key="ToggleButton.PressedBackground">
            <!--<Setter Property="Background" Value="Red"/>-->
            <Setter Property="Content" Value="Выключено"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter Content="{TemplateBinding Content}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="Green"/>
                    <Setter Property="Content" Value="Включено"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <Style TargetType="ToggleButton">
                <Setter Property="Background" Value="Red"/>
            </Style>
        </Grid.Resources>
        <ToggleButton Style="{StaticResource ToggleButton.PressedBackground}"/>
        <ToggleButton Grid.Row="1"/>

@Ахромчон · 03.10.2019, 10:39 **[ТС]**

Элд Хасп,

Интересно, вот кнопка имеет свой static.Background и static.Border.
И они меняются при событии "IsPressed", "IsMouseOver".
Moжно ли дополнительно менять Background через binding ViewModel?
Конфликтовать не будут?

@Элд Хасп · 03.10.2019, 12:00

Ахромчон, почитайте начало этой темы.
Я уже объяснял.

В дефолтном шаблоне кисти задают цвета только обычного состояния кнопки.
Все остальные цвета (кнопка нажата, наведён курсор, неактивна) заданы константами. Изменить эти цвета не задав свой шаблон - невозможно.

В этой теме показано как можно задать свойства для цветов в разных состояниях.

@Ахромчон · 03.10.2019, 15:24 **[ТС]**

Элд Хасп,

Возможно такое,
Polygon т.к. не имеет background, но при этом у него есть Fill.
Можно управлять Fill при помощи события PreviewMouseLeftButtonDown?
Другими словами, нажимаешь на контрол (в базе polygon), цвет Fill меняется, отпускаешь цвет Fill по умолчанию.

@Элд Хасп · 03.10.2019, 15:45

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

@Ахромчон · 03.10.2019, 15:51 **[ТС]**

Сообщение от Элд Хасп

Возьмите кнопку из этой темы и задайте нужные цвета.

Эта кнопка на базе baseButton, в которую вставлен polygon. Тут проще, так как все наследуется от кнопки.

А я спрашиваю на базе polygon. просто UC с polygon. Как тут?

Новые блоги и статьи Все статьи Все блоги /
Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .	[EasyBuilder Pro] Памятка по разработке для панелей Weintek ФедосеевПавел 26.08.2026 Памятка по разработке для панелей Weintek ВВЕДЕНИЕ Ранее, при реализации проектов основное внимание уделял разработке управляющей программы для контроллера, а панели оператора доставалось время. . .	Модель по догадкам anaschu 25.08.2026 Прошло две недели. Я уже рассказывал, как разговаривал с сотрудниками у сортировки и как понял, что главная ветка — не про приёмку, а про отбор. Но тогда я думал, что понял механику. На этой неделе я. . .
Запись в регистр сведений независимо от заполненности табличной части Maks 25.08.2026 Реализация из решения ниже выполнена на нетиповом документе с несколькими табличными частями, разработанного в КА2. Задача: Обеспечить запись документа в регистр сведений независимо от. . .	Ноутбук Альфария kumehtar 24.08.2026 Встретился тут в сети ноутбук Альфария, примарха Альфа-Легиона. Хотя возможно, это ноутбук Омегона, разумеется. Ну как вам?	Мастера простых решений DevAlt 23.08.2026 В сишарп стэках winforms, да и wpf существует сложная система связывания источниках данных и элементов формы(текстовые поля и метки), опирается все это на технологию событий и мета. . .	Цена ошибки DevAlt 23.08.2026 Человек я беспокойный и потому заинтересовался OCaml, в чате форсили функторы модулей как суперфичу. Пытаясь отдуплить концепт, наткнулся на тутор с простым примером. А главный принцип обучения от. . .

@Ахромчон 21 / 17 / 1 Регистрация: 01.09.2019 Сообщений: 262
	13.09.2019, 20:34 [ТС]
	Элд Хасп, а вы пробовали когда-нибудь сделать самоблокирующийся триггер IsPressed? 0

@Ахромчон 21 / 17 / 1 Регистрация: 01.09.2019 Сообщений: 262
	14.09.2019, 13:15 [ТС]
	ОК, а не нарушая текущий стиль? default background -не изменяется. IsChecked background -да. 0

@Ахромчон 21 / 17 / 1 Регистрация: 01.09.2019 Сообщений: 262
	14.09.2019, 14:56 [ТС]
	На `mahapp` не работает. У вас же есть мой проектик с `mahapp` ? Как оставить в живых весь стиль `mahapp`. И переопределить только Background IsChecked? F4 -property я не вижу настроек Background isСhecked. 0

@Элд Хасп Модератор 16165 / 11285 / 2892 Регистрация: 21.04.2018 Сообщений: 33,174 Записей в блоге: 2
	14.09.2019, 15:43
	Ахромчон, я далеко от компа 0

@Ахромчон 21 / 17 / 1 Регистрация: 01.09.2019 Сообщений: 262
	03.10.2019, 10:39 [ТС]
	Элд Хасп, Интересно, вот кнопка имеет свой static.Background и static.Border. И они меняются при событии "IsPressed", "IsMouseOver". Moжно ли дополнительно менять Background через binding ViewModel? Конфликтовать не будут? 0

@Элд Хасп Модератор 16165 / 11285 / 2892 Регистрация: 21.04.2018 Сообщений: 33,174 Записей в блоге: 2
	03.10.2019, 12:00
	Ахромчон, почитайте начало этой темы. Я уже объяснял. В дефолтном шаблоне кисти задают цвета только обычного состояния кнопки. Все остальные цвета (кнопка нажата, наведён курсор, неактивна) заданы константами. Изменить эти цвета не задав свой шаблон - невозможно. В этой теме показано как можно задать свойства для цветов в разных состояниях. 0

@Ахромчон 21 / 17 / 1 Регистрация: 01.09.2019 Сообщений: 262
	03.10.2019, 15:24 [ТС]
	Элд Хасп, Возможно такое, Polygon т.к. не имеет background, но при этом у него есть Fill. Можно управлять Fill при помощи события PreviewMouseLeftButtonDown? Другими словами, нажимаешь на контрол (в базе polygon), цвет Fill меняется, отпускаешь цвет Fill по умолчанию. 0

@Элд Хасп Модератор 16165 / 11285 / 2892 Регистрация: 21.04.2018 Сообщений: 33,174 Записей в блоге: 2
	03.10.2019, 15:45
	Ахромчон, без проблем. Но не чисто с Polygon. В WPF элементы выбираются по проведению, а не по внешнему виду. Возьмите кнопку из этой темы и задайте нужные цвета. 0