Как изменить передний план по умолчанию RadRadioButton
Я пытаюсь стилизовать свои RadRadioButton на основе стиля по умолчанию для RadRadioButton:
<Style x:Key = "MyRadRadioButtonStyle" TargetType = "{x:Type telerik:RadRadioButton}">
<Setter Property = "BorderThickness" Value = "1"/>
<Setter Property = "Foreground" Value = "Black"/>
<Setter Property = "Background">
<Setter.Value>
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0">
<GradientStop Color = "White" Offset = "0"/>
<GradientStop Color = "Gainsboro" Offset = "0.5"/>
<GradientStop Color = "#FFADADAD" Offset = "0.5"/>
<GradientStop Color = "#FFD4D4D4" Offset = "1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property = "BorderBrush" Value = "#FF848484"/>
<Setter Property = "CornerRadius" Value = "1"/>
<Setter Property = "Padding" Value = "3"/>
<Setter Property = "HorizontalContentAlignment" Value = "Center"/>
<Setter Property = "VerticalContentAlignment" Value = "Center"/>
<Setter Property = "FocusVisualStyle" Value = "{x:Null}"/>
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate TargetType = "{x:Type telerik:RadRadioButton}">
<Grid SnapsToDevicePixels = "True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name = "CommonStates">
<VisualState x:Name = "Normal"/>
<VisualState x:Name = "MouseOver">
<Storyboard>
<DoubleAnimation Duration = "0" To = "1" Storyboard.TargetProperty = "(UIElement.Opacity)" Storyboard.TargetName = "OuterMouseOverBorder"/>
</Storyboard>
</VisualState>
<VisualState x:Name = "Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "Visibility" Storyboard.TargetName = "OuterPressedBorder">
<DiscreteObjectKeyFrame KeyTime = "0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration = "0" To = "0" Storyboard.TargetProperty = "Opacity" Storyboard.TargetName = "CommonStatesWrapper"/>
<DoubleAnimation Duration = "0" To = "0" Storyboard.TargetProperty = "Opacity" Storyboard.TargetName = "FocusVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name = "Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "Visibility" Storyboard.TargetName = "DisabledVisual">
<DiscreteObjectKeyFrame KeyTime = "0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration = "0" To = "0.5" Storyboard.TargetProperty = "Opacity" Storyboard.TargetName = "Content"/>
</Storyboard>
</VisualState>
<VisualState x:Name = "DisabledChecked">
<Storyboard>
<DoubleAnimation Duration = "0" To = "0.5" Storyboard.TargetProperty = "Opacity" Storyboard.TargetName = "Content"/>
</Storyboard>
</VisualState>
<VisualState x:Name = "MouseOverChecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration = "0" Storyboard.TargetProperty = "Background" Storyboard.TargetName = "CheckedVisual">
<DiscreteObjectKeyFrame KeyTime = "0">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0">
<GradientStop Color = "#FFFFE8AB" Offset = "0"/>
<GradientStop Color = "#FFFFE08F" Offset = "0.5"/>
<GradientStop Color = "#FFFEAF27" Offset = "0.5"/>
<GradientStop Color = "#FFFFE74E" Offset = "1"/>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration = "0" Storyboard.TargetProperty = "BorderBrush" Storyboard.TargetName = "CheckedVisual">
<DiscreteObjectKeyFrame KeyTime = "0">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0">
<GradientStop Color = "#FF282828"/>
<GradientStop Color = "#FF5F5F5F" Offset = "1"/>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration = "0" Storyboard.TargetProperty = "BorderBrush" Storyboard.TargetName = "InnerCheckedVisual">
<DiscreteObjectKeyFrame KeyTime = "0">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0">
<GradientStop Color = "#FFB69A78"/>
<GradientStop Color = "#FFFFE17A" Offset = "0.169"/>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name = "BackgroundVisibility">
<VisualState x:Name = "BackgroundIsHidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "Visibility" Storyboard.TargetName = "OuterBorder">
<DiscreteObjectKeyFrame KeyTime = "0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration = "0" To = "0" Storyboard.TargetProperty = "Opacity" Storyboard.TargetName = "DisabledVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name = "BackgroundIsVisible"/>
</VisualStateGroup>
<VisualStateGroup x:Name = "CheckStates">
<VisualState x:Name = "Checked">
<Storyboard>
<DoubleAnimation Duration = "0" To = "1" Storyboard.TargetProperty = "Opacity" Storyboard.TargetName = "CheckedVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name = "Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name = "FocusStatesGroup">
<VisualState x:Name = "Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "Visibility" Storyboard.TargetName = "FocusVisual">
<DiscreteObjectKeyFrame KeyTime = "0:0:0.15">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name = "Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "Visibility" Storyboard.TargetName = "FocusVisual">
<DiscreteObjectKeyFrame KeyTime = "0:0:0.115">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name = "OuterBorder" BorderBrush = "{TemplateBinding BorderBrush}" BorderThickness = "{TemplateBinding BorderThickness}" Background = "{TemplateBinding Background}" CornerRadius = "{TemplateBinding CornerRadius}">
<Border BorderBrush = "White" BorderThickness = "{TemplateBinding BorderThickness}" Background = "{x:Null}" CornerRadius = "{TemplateBinding InnerCornerRadius}"/>
</Border>
<Border x:Name = "OuterMouseOverBorder" BorderBrush = "#FFFFC92B" BorderThickness = "{TemplateBinding BorderThickness}" CornerRadius = "{TemplateBinding CornerRadius}" Opacity = "0">
<Border.Background>
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0">
<GradientStop Color = "#FFFFFBDA" Offset = "0"/>
<GradientStop Color = "#FFFEEBAE" Offset = "0.5"/>
<GradientStop Color = "#FFFFD25A" Offset = "0.5"/>
<GradientStop Color = "#FFFFFBA3" Offset = "1"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush = "White" BorderThickness = "{TemplateBinding BorderThickness}" Background = "{x:Null}" CornerRadius = "{TemplateBinding InnerCornerRadius}"/>
</Border>
<Border x:Name = "OuterPressedBorder" BorderThickness = "{TemplateBinding BorderThickness}" CornerRadius = "{TemplateBinding CornerRadius}" Visibility = "Collapsed">
<Border.BorderBrush>
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0">
<GradientStop Color = "#FF282828"/>
<GradientStop Color = "#FF5F5F5F" Offset = "1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0">
<GradientStop Color = "#FFFFDCAB" Offset = "0"/>
<GradientStop Color = "#FFFFD18F" Offset = "0.5"/>
<GradientStop Color = "#FFFE9227" Offset = "0.5"/>
<GradientStop Color = "#FFFFBA74" Offset = "0"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderThickness = "{TemplateBinding BorderThickness}" Background = "{x:Null}" CornerRadius = "{TemplateBinding InnerCornerRadius}">
<Border.BorderBrush>
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0">
<GradientStop Color = "#FFB69A78"/>
<GradientStop Color = "#FFFFE17A" Offset = "0.126"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Border>
<Border x:Name = "DisabledVisual" BorderBrush = "Transparent" BorderThickness = "{TemplateBinding BorderThickness}" Background = "#FFE0E0E0" CornerRadius = "{TemplateBinding CornerRadius}" Visibility = "Collapsed"/>
<Grid x:Name = "CommonStatesWrapper">
<Border x:Name = "FocusVisual" BorderBrush = "#FFFFC92B" BorderThickness = "{TemplateBinding BorderThickness}" Background = "Transparent" CornerRadius = "{TemplateBinding CornerRadius}" Visibility = "Collapsed">
<Border x:Name = "FocusInnerVisual" BorderBrush = "Transparent" BorderThickness = "1" Background = "{x:Null}" CornerRadius = "{TemplateBinding InnerCornerRadius}"/>
</Border>
<Border x:Name = "CheckedVisual" BorderBrush = "#FFFFC92B" BorderThickness = "{TemplateBinding BorderThickness}" CornerRadius = "{TemplateBinding CornerRadius}" Opacity = "0">
<Border.Background>
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0">
<GradientStop Color = "#FFFFDCAB" Offset = "0"/>
<GradientStop Color = "#FFFFD18F" Offset = "0.5"/>
<GradientStop Color = "#FFFE9227" Offset = "0.5"/>
<GradientStop Color = "#FFFFD74E" Offset = "1"/>
</LinearGradientBrush>
</Border.Background>
<Border x:Name = "InnerCheckedVisual" BorderBrush = "White" BorderThickness = "{TemplateBinding BorderThickness}" Background = "{x:Null}" CornerRadius = "{TemplateBinding InnerCornerRadius}"/>
</Border>
</Grid>
<ContentPresenter x:Name = "Content" ContentTemplate = "{TemplateBinding ContentTemplate}" Content = "{TemplateBinding Content}" ContentStringFormat = "{TemplateBinding ContentStringFormat}" HorizontalAlignment = "{TemplateBinding HorizontalContentAlignment}" Margin = "{TemplateBinding Padding}" RecognizesAccessKey = "True" VerticalAlignment = "{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Скажем, я бы сделал темный фон для состояния Проверено, как я могу изменить кнопку, чтобы она имела белый передний план (цвет текста) в этом состоянии?
РЕДАКТИРОВАТЬ1
Основываясь на комментарии Крис В., я добавил ColorAnimation к этому CheckStatesVIsualStateGroup:
<VisualStateGroup x:Name = "CheckStates">
<VisualState x:Name = "Checked">
<Storyboard>
<DoubleAnimation Duration = "0" Storyboard.TargetName = "CheckedVisual"
Storyboard.TargetProperty = "Opacity" To = "1" />
<ColorAnimation Storyboard.TargetName = "FontColor" Storyboard.TargetProperty = "Color" To = "White" Duration = "0:0:0" />
</Storyboard>
</VisualState>
<VisualState x:Name = "Unchecked" />
</VisualStateGroup>
Но это не работает, это дает мне эту ошибку:
РЕДАКТИРОВАТЬ2
Я изменил это на основе нового комментария:
<VisualStateGroup x:Name = "CheckStates">
<VisualState x:Name = "Checked">
<Storyboard>
<DoubleAnimation Duration = "0" Storyboard.TargetName = "CheckedVisual"
Storyboard.TargetProperty = "Opacity" To = "1" />
<ColorAnimation Storyboard.TargetName = "Content" Storyboard.TargetProperty = "Foreground" To = "White" Duration = "0:0:0" />
</Storyboard>
</VisualState>
<VisualState x:Name = "Unchecked" />
</VisualStateGroup>
Но теперь у меня такая ошибка:
@ChrisW. Спасибо за ваш комментарий, пожалуйста, посмотрите мой обновленный вопрос.
ах, да, у вас там ContentPresenter. Измените TargetName на Content, а TargetProperty на Foreground
@ChrisW. Еще раз спасибо, пожалуйста, посмотрите мою новую редакцию.
Вот дерьмо, просто замените свойство Foreground на TextElement.Foreground, и все будет хорошо. Извините, мой xaml немного ржавый.
@ChrisW. Извините, но я все равно получаю ту же ошибку. Вот только теперь написано: Не удается разрешить все ссылки на свойства в пути к свойству TextElement.Foreground. Убедитесь, что применимые объекты поддерживают свойства.
Хммм, мой xaml ржавый, но не такой уж ржавый. Это должно быть хорошо. Попробую пойти посмотреть копию кнопки телерик в кнопке и увидеть своего виновника. Я знаю, что в их документах есть кисть, которую вы можете легко переопределить для достижения своей цели, но теперь вы по существу переопределили шаблон стиля, чтобы он все равно не применялся. Эта задача также обычно очень проста, используя Blend и панель состояний, чтобы увидеть доступные свойства, но я переключился на веб-материалы некоторое время назад. В любом случае, продолжение следует.
@dhrm Поскольку меня это интересует, не могли бы вы проверить, что происходит, когда вы используете TextBlock или что-то подобное, например Content или telerik:RadRadioButton (или вы уже используете что-то подобное). Ответ от Камрана Асима все еще работает?
Ответы 3
Вы изменили фон проверки на черный ?. Вы можете редактировать фоновое свойство
Для переднего плана примените ColorAnimation внутри Checked VisualState = "Checked"
<VisualState x:Name = "Checked">
<Storyboard>
...........
<ColorAnimation To = "White" Storyboard.TargetProperty = "(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName = "Content" />
</Storyboard>
</VisualState>
Ваше решение будет работать, если вы не сделаете что-то вроде этого <ToggleButton><TextBlock>Content</TextBlock></ToggleButton> (я использовал ToggleButton для справки)
Я пробовал вышеуказанное решение, используя Contenet для некоторого текста. оно работает. Он должен работать с другими элементами управления, имеющими свойство переднего плана. в любом случае вы знаете, что должно быть содержимым, поэтому вы можете установить свойство соответствующим образом
Я очень благодарен за ваш комментарий. Я знаю, что это неподходящее место для вопросов, но я предоставил небольшой пример, который я пробовал с вашим решением и который для меня не работает.
Привет @nosale Спасибо, что поделились примером. Решил Ваш вопрос другим способом. Не могли бы вы попробовать это. 1. Удалите цветную анимацию переднего плана из отмеченных и снятых флажков 2. примените следующий стиль <ControlTemplate.Triggers> <Trigger Property = "IsChecked" Value = "true"> <Setter Property = "Foreground" Value = "White" /> </ Trigger > <Trigger Property = "IsChecked" Value = "false"> <Setter Property = "Foreground" Value = "Black" /> </Trigger> </ControlTemplate.Triggers> У меня это сработало, проверьте
Спасибо за ваше время. Я знаю, что это сработает, но вопрос в том, как заставить это работать с помощью VisualStateManager (я пока не нашел решения, кроме того, что я опубликовал). Я нашел отвечать, почему ваш подход не работает в этих условиях (все еще применяется в 2018 году)
Примечание: У меня нет доступа к telerik:RadRadioButton, поэтому я использовал ToggleButton для справки
Чтобы анимация работала даже на более сложном Content
<telerik:RadRadioButton>
<TextBlock>SomeContent</TextBlock>
</telerik:RadRadioButton>
Вы хотите установить Foreground из RadRadioButton
Обычно первый подход выглядит примерно так
<ColorAnimation To = "White" Storyboard.TargetProperty = "Foreground.(SolidColorBrush.Color)" Storyboard.Target = "{Binding RelativeSource = {RelativeSource TemplatedParent}}" />
Но тогда вы получите эту ошибку
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element...
Эта ошибка возникает из-за того, что VisualStateManager не является частью VisualTree
.
См. Также: Ошибка WPF: не удается найти управляющий FrameworkElement для целевого элемента
Чтобы решить эту проблему, вы должны использовать BindingProxy
.
Для справки см. Также: Видимость привязки для DataGridColumn в WPF
public class BindingProxy : Freezable
{
#region Overrides of Freezable
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
#endregion
public object Data
{
get { return (object)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("Data", typeof(object),
typeof(BindingProxy));
}
<ControlTemplate TargetType = "{x:Type telerik:RadRadioButton}">
<Grid SnapsToDevicePixels = "True">
<Grid.Resources>
<local:BindingProxy x:Key = "BindingProxy" Data = "{Binding RelativeSource = {RelativeSource TemplatedParent}}" />
</Grid.Resources>
...
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name = "CommonStates">
...
<VisualState x:Name = "Checked">
<Storyboard>
...
<ColorAnimation To = "White" Storyboard.TargetProperty = "Foreground.(SolidColorBrush.Color)" Storyboard.Target = "{Binding Path=Data, Source = {StaticResource BindingProxy}}" />
...
</Storyboard>
</VisualState>
...
</VisualStateGroup>
...
</VisualStateManager>
...
</Grid>
</ControlTemplate>
Вот код, который должен работать (по крайней мере, работает для меня):
<VisualState x:Name = "Checked">
<Storyboard>
<DoubleAnimation Duration = "0" To = "1" Storyboard.TargetProperty = "Opacity" Storyboard.TargetName = "CheckedVisual"/>
<ObjectAnimationUsingKeyFrames Duration = "0" Storyboard.TargetProperty = "(TextElement.Foreground)" Storyboard.TargetName = "Content">
<DiscreteObjectKeyFrame KeyTime = "0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color = "White"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Чтобы создать такие стили правильным способом (что означает «рекомендовано Telerik»), вы должны щелкнуть правой кнопкой мыши компонент в дизайнере -> Редактировать шаблон ... -> Редактировать копию (ну, на этом этапе вы можете попробовать другие). После этого правильный (рабочий) код будет сгенерирован в xaml либо в ресурсах, либо в файле App.xaml. Имея этот код, вы можете изменить эти параметры. Надеюсь, это помогло.
Видите свой "Проверенный"
VisualState? Вставьте это между тегамиstoryboard;<ColorAnimation Storyboard.TargetName = "FontColor" Storyboard.TargetProperty = "Color" To = "White" Duration = "0:0:0" />