Кастомная кнопка в 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. Как тут?

Новые блоги и статьи Все статьи Все блоги /
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))	Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .

@Ахромчон 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

@Элд Хасп Модератор 16166 / 11286 / 2892 Регистрация: 21.04.2018 Сообщений: 33,175 Записей в блоге: 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

@Элд Хасп Модератор 16166 / 11286 / 2892 Регистрация: 21.04.2018 Сообщений: 33,175 Записей в блоге: 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

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