Форум программистов, компьютерный форум, киберфорум
Наши страницы
C#: WPF, UWP и Silverlight
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
pav1uxa
1857 / 1711 / 802
Регистрация: 23.01.2014
Сообщений: 6,082
Завершенные тесты: 1
1

Настройка стиля кнопки

20.07.2015, 17:32. Просмотров 1294. Ответов 8
Метки нет (Все метки)

Хочу настроить стиль для кнопок на форме - когда наводишь на кнопку цвет кнопки плавно меняется. Код взял стандартный с msdn:
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
        <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Border" BorderBrush="{StaticResource BorderColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.5" />
                                        <VisualTransition GeneratedDuration="0" To="Pressed" />
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>                                            
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.Color"
                                                Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
 
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3,1,3,1"/>
                        </Border>
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
Проблема в том, что при наведении курсором на одну кнопку, цвет меняется у всех кнопок формы. И такое ощущение что не только формы, вообще везде где x:Name="Border". Как сделать то что мне нужно?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.07.2015, 17:32
Ответы с готовыми решениями:

Создания стиля кнопки
Делаю стиль для кнопки и сталкнулся с такой проблемой, ни как не могу все...

Взаимодействие кнопки из стиля с окном
Привет всем, у меня есть программа со своим стилем окна:...

Изменение стандартного стиля кнопки
Добрый день. Проект UWP. Пытаюсь сделать свой дизайн кнопки. Необходимо, чтобы...

Исключение при попытке изменения стиля кнопки
Не могу исправить ошибку при построении приложения, помогите пожалуйста.

Можно ли где посмотреть исходный код стиля кнопки
Можно ли где посмотреть исходный стиль кнопки?)

8
Ev_Hyper
Заблокирован
20.07.2015, 17:35 2
pav1uxa, попробуйте убрать:
XML
1
TargetType="{x:Type Button}"
0
pav1uxa
1857 / 1711 / 802
Регистрация: 23.01.2014
Сообщений: 6,082
Завершенные тесты: 1
20.07.2015, 20:53  [ТС] 3
Цитата Сообщение от Ev_Hyper Посмотреть сообщение
попробуйте убрать:
Вы имеете ввиду удалить свойство TargetType у тега Style? Тогда ошибка
Код
The member "Template" is not recognized or is not accessible.
на строку
XML
1
<Setter Property="Template">
Добавлено через 1 минуту
Вот весь код, если что. При наведении на одну кнопку, меняется цвет и другой также. x:Key убрал, допустим мне нужно чтобы ко всем кнопкам на форме стиль применялся автоматчиески...
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
39
40
41
42
43
<Window x:Class="EMptyWpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Color x:Key="ControlMouseOverColor">#bbbbbb</Color>
        <SolidColorBrush x:Key="BackgroundColor">#aaaaaa</SolidColorBrush>
        <SolidColorBrush x:Key="BorderColor">#aaaaaa</SolidColorBrush>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Border" BorderBrush="{StaticResource BorderColor}"
                                BorderThickness="1" Background="{StaticResource BackgroundColor}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.25" />
                                        <VisualTransition GeneratedDuration="0" To="Pressed" />
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.Color"
                                                Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3,1,3,1"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
    </StackPanel>
</Window>
Добавлено через 29 минут
Может как то проще можно это сделать?
0
pav1uxa
1857 / 1711 / 802
Регистрация: 23.01.2014
Сообщений: 6,082
Завершенные тесты: 1
23.07.2015, 11:10  [ТС] 4
Актуально.
0
Tsin
721 / 466 / 183
Регистрация: 30.12.2012
Сообщений: 1,265
Записей в блоге: 2
Завершенные тесты: 3
23.07.2015, 16:32 5
pav1uxa, у меня получилось реализовать через триггеры

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
39
40
41
42
43
44
45
46
47
48
49
<Window.Resources>
        <SolidColorBrush x:Key="Button.Static.Background" Color="#AAAAAA"/>
        <Color x:Key="Button.Static.Background.Color">#AAAAAA</Color>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#BBBBBB"/>
        <Color x:Key="Button.MouseOver.Background.Color">#BBBBBB</Color>
 
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
 
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" 
                                                            From="{StaticResource Button.Static.Background.Color}" 
                                                            To="{StaticResource Button.MouseOver.Background.Color}"           
                                                            Duration="0:0:0.25"
                                                            AutoReverse="False"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" 
                                                            From="{StaticResource Button.MouseOver.Background.Color}"           
                                                            To="{StaticResource Button.Static.Background.Color}" 
                                                            Duration="0:0:0.25"
                                                            AutoReverse="False"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
3
pav1uxa
1857 / 1711 / 802
Регистрация: 23.01.2014
Сообщений: 6,082
Завершенные тесты: 1
23.07.2015, 18:45  [ТС] 6
Tsin, спасибо. Еще бы узнать почему с моим примером такая лажа...
0
Tsin
721 / 466 / 183
Регистрация: 30.12.2012
Сообщений: 1,265
Записей в блоге: 2
Завершенные тесты: 3
24.07.2015, 12:21 7
Лучший ответ Сообщение было отмечено pav1uxa как решение

Решение

Цитата Сообщение от pav1uxa Посмотреть сообщение
Еще бы узнать почему с моим примером такая лажа...
Значит так. Проблемная связка тут такая:
XML
1
2
3
4
5
6
7
8
9
<SolidColorBrush x:Key="BackgroundColor">#aaaaaa</SolidColorBrush>
 
<Border x:Name="Border" Background="{StaticResource BackgroundColor}">
 
<VisualState x:Name="MouseOver">
    <Storyboard>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.Color"
                                                      Storyboard.TargetName="Border">
            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
Я не претендую на правильность, но моя интерпретация такова: SolidColorBrush с ключом BackgroundColor статически биндится к Border, т.е. все кнопки будут ссылаться на этот элемент. И, как только в любой из кнопок запустится Storyboard, то изменения заденут непосредственно сам SolidColorBrush и распространятся на все кнопки.

У меня получилось решить проблему двумя путями:
1) С помощью DynamicResource
XML
1
<Border x:Name="Border" Background="{DynamicResource BackgroundColor}">
2) Задать свойство Background другим образом (вот тут я не очень понял почему прокатило)
XML
1
2
3
4
5
6
7
<Color x:Key="ControlNormalColor">#aaaaaa</Color>
 
<Border x:Name="Border" BorderBrush="{StaticResource BorderColor}"
                                BorderThickness="1">
                            <Border.Background>
                                <SolidColorBrush Color="{StaticResource ControlNormalColor}"/>
                            </Border.Background>
2
pav1uxa
1857 / 1711 / 802
Регистрация: 23.01.2014
Сообщений: 6,082
Завершенные тесты: 1
24.07.2015, 16:03  [ТС] 8
ох уж этот wpf... благодарю.
0
Tsin
721 / 466 / 183
Регистрация: 30.12.2012
Сообщений: 1,265
Записей в блоге: 2
Завершенные тесты: 3
24.07.2015, 16:12 9
pav1uxa, я вряд ли сейчас открою Америку, но мне в таких ситуациях здорово помогает Blend. Всегда можно подглядеть как устроен контрол
0
24.07.2015, 16:12
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.07.2015, 16:12

Поддержка стиля XP
Подскажите как сделать что бы в windows XP приложение на WPF было бы таким же ...

Создание стиля окна
Привет всем, пишу стиль, конечно взял что то более менее готовое, и разбираюсь...

Переопределение стиля TabControl
Не могу понять, как убрать границу у заголовка TabControl'a. Всё, нашёл....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru