How to restyle a XAML radio button as a coloured label - xaml

I am using the following style with a group of radiobuttons:
<Style x:Key="RadioTextStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Label Content="{TemplateBinding Content}" Foreground="Red"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The trigger is not executed and I assume this is because it is looking for the IsChecked property of the Label. How can I properly ensure that the label colour properly tracks the IsChecked state of the underlying RadioButton?
I am still trying many variants of this and currently have the following:
<Style x:Key="RadioTextStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Label x:Name="RadioLabel" Content="{TemplateBinding Content}" Foreground="Red"/>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="True">
<Setter Property="Foreground" Value="Green"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This looks right to me and intellisense suggests most of the values. However, it still doesn't actually change selected labels to green.
Thanks,
Andy

Keep your original try. You just need to tell your trigger what it's actually changing something on with TargetName like;
<Style x:Key="RadioLabel" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Label x:Name="RadioLabel"
Content="{TemplateBinding Content}" Foreground="Red"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="RadioLabel"
Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hope this helps, cheers.

Related

2 different colored borders around TextBox

I want to do create static style where TextBox element will have 2 different colored borders around it. Can I achieve this?
I already have rounded textbox with 1 border, but I'm clueless how to add another around it.
<Style TargetType="{x:Type TextBox}" x:Key="RoundTextBox">
<Style.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="3"/>
</Style>
</Style.Resources>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FF32C17C"/>
<GradientStop Color="#FF01312F" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="#FF69FF55"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="20,10,0,-5"/>
</Style>
This is my code for textbox style.
Thank you for all answers :)
You can change control template of the textbox and define another border inside the border.
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border
BorderBrush="Red"
BorderThickness="1"
CornerRadius="2">
<Border
Name="Border"
Background="White"
BorderBrush="Gray"
BorderThickness="1"
CornerRadius="2">
<ScrollViewer x:Name="PART_ContentHost" Margin="0" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TextBox
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Test" />
</Grid>
Here is the result!
For more information about textbox styles and templates you can click here.

How to style row header column in DataGrid

I am using ComponentOne C1DataGrid. I have been able to style it to the full extent except row header column.
How can I style it in XAML?
You can see the image:
here
Thanks,
flot
Answering my own question in case somebody else is interesting:
There is a special presenter, DataGridRowHeaderPresenter, that can be styled.
I wanted to replace a standard row details toggle with the tree-like "+" and "-" signs and I did it as follows:
<Style x:Key="DataGridRowHeaderStyle2" TargetType="{x:Type c1:DataGridRowHeaderPresenter}">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type c1:DataGridRowHeaderPresenter}">
<!-- BulletDecorator is used to provide baseline alignment between the sign and the Content -->
<BulletDecorator Background="#BFEFF2F5">
<BulletDecorator.Bullet>
<Grid Width="13" Height="13">
<Image Name="sign" Source="/myControls;component/Resources/Images/plus.png" />
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Source" Value="/myControls;component/Resources/Images/minus.png" TargetName="sign"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

how to set the color of toggle button from style already defined in app xaml?

I had created a button and i want to change its color using style from app xaml.
But,i don't get the exact code and i am new to xaml.
Can any one help me with some example.
I am also confused to use which property to change color means background or foreground?
<Window
x:Class="ToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar"
Width="300"
Height="300">
<DockPanel>
<ToolBarTray
DockPanel.Dock="Top"
IsLocked="True"
Orientation="Horizontal">
<ToolBar
x:Name="ToolBar1">
<ToggleButton>
<ToggleButton.Style>
<Style
TargetType="{x:Type ToggleButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Play</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Pause</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</ToolBar>
</ToolBarTray>
</DockPanel>
</Window>
Within a toolbar, the two statements:
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
causes the toggle button to appear in the normal state when the toggle button is checked, however nothing changes when you hover over the checked toggle button.
If I wrap the toggle button in another layout, say wrap layout:
<Window
x:Class="ToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar"
Width="300"
Height="300">
<WrapPanel>
<ToggleButton>
<ToggleButton.Style>
<Style
TargetType="{x:Type ToggleButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Play</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Pause</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</WrapPanel>
</Window>
the two statements:
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
You can find tutorial in the folowing url
http://social.msdn.microsoft.com/Forums/pl-PL/wpf/thread/7e565a41-0aad-40a3-a3c4-666c5caf38fe
Thanks
Deepak

How Can I Create a Bound List of RadioButtions with ToolTips in Xaml?

I want to create a list of logically related RadioButtons. The RadioButtons are bound for MVVM use. There's ToolTips on each RadioButtons.
Here is a Style that creates a group of logically related RadioButtons by using a ListBox. MyClass contains two String properties: MyName and MyToolTip. The style will display the list of RadioButtons including properly functioning individual ToolTips. This is an all bound, all Xaml solution for MVVM use.
Example usage:
ListBox Style="{StaticResource radioListBox}" ItemsSource="{Binding MyClasses}" SelectedValue="{Binding SelectedMyClass}"/>
Style:
<Style x:Key="radioListBox" TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="Transparent">
<RadioButton Focusable="False" IsHitTestVisible="False" IsChecked="{TemplateBinding IsSelected}" Content="{Binding MyName}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{Binding MyToolTip}" />
</Style>
</Setter.Value>
</Setter>
</Style>

How to change button background color depending on bound command canexecute?

I Have a ItemTemplate in which is a simple button bound on a command, which can be executable or not depending on some property.
I'd like the color of this button's background to change if the command isn't executable.
I tried several methods, but I can't find anyway to do this purely in XAML (I'm doing this in a study context, and code behind isn't allowed).
Here's my code for the button :
<Button x:Name="Dispo" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="30" Height="30"
Grid.Column="2" Grid.Row="0"
Command="{Binding AddEmpruntCommandModel.Command}"
CommandParameter="{Binding ElementName='flowCars', Path='SelectedItem'}"
vm:CreateCommandBinding.Command="{Binding AddEmpruntCommandModel}" >
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Button.Background" Value="Green"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Button.Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
You can specify your own template like that:
<Button Content="OK" Command="{Binding SomeCommand}">
<Button.Style>
<Style>
<Setter Property="Button.Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border" Background="Green">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>