I have a togglebutton and when it is clicked I simply want to change the background and the content. The content changes correctly, but the background changes, but instead of my specified background value, it is a default (?) blue-ish. In previous struggles I could get the background to change, but not the content. That was done differently, though, w/ a datatrigger instead of the method below.
I'm using C# WPF and MVVM and could bind the content to another property and when the binded ischecked property is changed, I could change the property in the viewmodel, but I was hoping not to have to do that. Maybe it's the correct way?
Here's my code that 1/2 works:
<ToggleButton Name="Axis3AbsIncButton"
IsChecked="{Binding Path=UserControlOneStatic.MotionParameters.Axis3AbsorIncOption, Source={StaticResource Locator}}">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="ToggleButton.Background" Value="Goldenrod"/>
<Setter Property="ToggleButton.Content"
Value="ABS" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ToggleButton.Background"
Value="Green" />
<Setter Property="ToggleButton.Content"
Value="Inc" />
</Trigger>
</Style.Triggers>
</Style >
</ToggleButton.Style>
</ToggleButton>
This is very close, but I have lost the border of the togglebutton:
<ToggleButton Name="Axis3AbsIncButton"
Grid.Row="2"
Grid.Column="13"
Grid.ColumnSpan="2"
Grid.RowSpan="1"
Focusable="True"
IsChecked="{Binding Path=UserControlOneStatic.MotionParameters.Axis3AbsorIncOption, Source={StaticResource Locator}}">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border CornerRadius="3" BorderThickness="1" Background="{TemplateBinding Background}">
<ContentPresenter Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="False">
<Setter Property="Background"
Value="Goldenrod">
</Setter>
</Trigger>
<Trigger Property="IsChecked"
Value="True">
<Setter Property="Background"
Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="ToggleButton.Content"
Value="ABS" />
<Style.Triggers>
<Trigger Property="IsChecked"
Value="True">
<Setter Property="ToggleButton.Content"
Value="Inc" />
</Trigger>
</Style.Triggers>
</Style >
</ToggleButton.Style>
</ToggleButton>
Your XAML code is correct. When you click ToggleButton, background color changed to green. But it's changing when you move mouse from button. When mouse coursor is over ToggleButton, it has blue color.
Edit:
Try this:
<ToggleButton Name="Axis3AbsIncButton"
Grid.Row="2"
Grid.Column="13"
Grid.ColumnSpan="2"
Grid.RowSpan="1"
Focusable="True"
IsChecked="{Binding Path=UserControlOneStatic.MotionParameters.Axis3AbsorIncOption, Source={StaticResource Locator}}">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsDefaulted" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="ToggleButton.Background" Value="Goldenrod"/>
<Setter Property="ToggleButton.Content"
Value="ABS" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ToggleButton.Background"
Value="Green" />
<Setter Property="ToggleButton.Content"
Value="Inc" />
</Trigger>
</Style.Triggers>
</Style >
</ToggleButton.Style>
</ToggleButton>
Related
I am trying to bind the ItemsSource and SelectedItem properties of a ComboBox and the items are not displaying properly. The ComboBox is populated with the values of an Enum based on a solution suggested in this post. I have defined the ComboBox on the View as follows:
<ComboBox
Grid.Column="1"
Grid.Row="2"
ItemContainerStyle="{DynamicResource ComboBoxItemStyle}"
Style="{DynamicResource MaterialComboBox}"
SelectedItem="{Binding SelectedSetting}" ItemsSource="{Binding SettingOptions}" />
The properties on ViewModel I bind to are defined as follows:
private DataUpdateRate _selectedSetting;
public DataUpdateRate SelectedSetting
{
get { return _selectedSetting; }
set
{
_selectedSetting = value;
OnPropertyChanged("SelectedMyEnumType");
}
}
public IEnumerable<DataUpdateRate> SettingOptions
{
get
{
return Enum.GetValues(typeof(DataUpdateRate))
.Cast<DataUpdateRate>();
}
}
To the same ComboBox, I have also applied a custom style and template. My guess is that the issue lies in the DataTemplate I defined for the ContentPresenter
<!-- ItemTemplate-->
<Style x:Key="ComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="6 4"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border
x:Name="itemBorder"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<TextBlock
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Text="{TemplateBinding Content}"
FontSize="16"
FontWeight="Medium"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="itemBorder" Value="{StaticResource SurfaceElevation5Brush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Toggle Button (main button with arrow) -->
<Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="ClickMode" Value="Press"/>
<Setter Property="Height" Value="40" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border
x:Name="templateRoot"
Background="{StaticResource SurfaceElevation2Brush}"
BorderBrush="{StaticResource SurfaceElevation5Brush}"
BorderThickness="0 0 0 1.5"
CornerRadius="5 5 0 0"
SnapsToDevicePixels="true">
<Border
SnapsToDevicePixels="true"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="6 0">
<Viewbox Width="15" Height="15">
<Path
x:Name="arrow"
Stretch="Fill"
Data="M24 30 14 20.05H34Z"
Fill="{StaticResource SurfaceElevation5Brush}"/>
</Viewbox>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource PrimaryLightBrush}" />
<Setter Property="Fill" TargetName="arrow" Value="{StaticResource PrimaryLightBrush}"/>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource PrimaryBrush}" />
<Setter Property="Fill" TargetName="arrow" Value="{StaticResource PrimaryBrush}"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}">
<Grid SnapsToDevicePixels="True">
<!-- Popup -->
<Popup
x:Name="PART_Popup"
AllowsTransparency="true"
IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Bottom"
PopupAnimation="Slide">
<!-- This is the actual dropdown part-->
<Border
x:Name="dropDownBorder"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
Background="{StaticResource SurfaceElevation3Brush}"
CornerRadius="0 0 5 5">
<ScrollViewer x:Name="DropDownScrollViewer">
<ItemsPresenter
x:Name="ItemsPresenter"
KeyboardNavigation.DirectionalNavigation="Contained"
SnapsToDevicePixels="True"
/>
</ScrollViewer>
</Border>
</Popup>
<!-- ToggleButton -->
<ToggleButton
x:Name="toggleButton"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource ComboBoxToggleButton}"/>
<!-- ContentPresenter -->
<ContentPresenter
x:Name="contentPresenter"
ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="false"
Margin="10 0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text="{TemplateBinding Content}" FontSize="16"/>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Grid>
</ControlTemplate>
<!-- Main ComboBo Style -->
<Style x:Key="MaterialComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}"/>
<Setter Property="Padding" Value="6,3,5,3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="20 0" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template" Value="{StaticResource ComboBoxTemplate}"/>
</Style>
When I run the application the ComboBox expands according to the number of elements in the Enum, suggesting that it does generate the ComboBoxItems correctly, but doesn't display the values of the items. I have also tried another solution from the post I referenced earlier with the same result.
I assume that I have done something wrong with the ComboBox template, but I can't put my finger on it. If anyone has a solution I would greatly appreciate it.
I'm creating a WPF application for a touchscreen.
There should be a button on the screen with an Icon (image).
The code below shows how the button should look like.
So far so good..
What I would like to achieve is that when you press the button, the first BorderBrush color should change from “#0070b8” to “#00395c” and the second BorderBrush color should change from “#e3e3e3” to “#727272”.
Could someone please help me how to achieve this?
<Button Width="64" Height="64" Grid.Row="1" Margin="1,1" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="Resources\Home_Icon_2.bmp" Width="54" Height="54"></Image>
<Button.Style>
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border CornerRadius="6" Background="{TemplateBinding Background}" Name="button" Width="64">
<Grid>
<Border BorderThickness="0,0,2,2" BorderBrush="#0070b8" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="1" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<Border BorderThickness="2,2,0,0" BorderBrush="#e3e3e3" Opacity="0.5" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="1" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<ContentPresenter TextBlock.FontSize="{TemplateBinding FontSize}" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="button" Property="Background" Value="#e3e3e3" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#c6c3c6" />
</Style>
</Button.Style>
</Button>
You could always set the brush color in your click event:
private void btnYourButton_Click(object sender, RoutedEventArgs e)
{
btnYourButton.BorderBrush = (Brush)new BrushConverter().ConvertFrom("#00395c");
}
This would be one solution. Note that we've assigned our brushes to separate resources so that we don't have magic numbers in our style. This is ideal for when you need to use the same colour scheme across multiple controls, and saves a lot of time when you want to change said colour scheme.
<Style x:Key="AdtakrButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="ButtonBorder" CornerRadius="5" BorderThickness="{DynamicResource AdtakrButtonBorderThickness}" BorderBrush="{DynamicResource AdtakrBlack}" Background="{DynamicResource AdtakrWhite}" Margin="{DynamicResource ButtonMargin}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="6,0,6,0" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource AdtakrGrey2}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AdtakrGrey2}" TargetName="ButtonBorder"/>
<Setter Property="Background" Value="{DynamicResource AdtakrGrey1}" TargetName="ButtonBorder"/>
<Setter Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource AdtakrGrey2}" TargetName="ButtonBorder"/>
<Setter Property="BorderBrush" Value="{DynamicResource AdtakrGrey2}" TargetName="ButtonBorder"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource AdtakrLightBlue}" TargetName="ButtonBorder"/>
<Setter Property="BorderBrush" Value="{DynamicResource AdtakrLightBlue}" TargetName="ButtonBorder"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="{DynamicResource AdtakrDefFontSize}"/>
<Setter Property="MinWidth" Value="90"/>
<Setter Property="Height" Value="40"/>
<Setter Property="ToolTipService.ShowOnDisabled" Value="True"/>
</Style>
If you need to have it change between more than 1 colour, then your best bet is to have a command on your databound VM and the command changes a colour property that the button also binds to. Alternatively, if it's supposed to reflect 3 states, using a toggle button with the three state option is probably your better bet, as then you can set triggers against the IsChecked property of the button.
Found the solution!
By giving the borders a name and then they are accessible in the Trigger Property
<Button Width="64" Height="64" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="Images\Home_Icon_2.png" Width="54" Height="54"></Image>
<Button.Style>
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="button" CornerRadius="6" Background="{TemplateBinding Background}" Width="64">
<Grid>
<Border x:Name="border1" BorderThickness="0,0,2,2" BorderBrush="#0070b8" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="1" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<Border x:Name="border2" BorderThickness="2,2,0,0" BorderBrush="#e3e3e3" Opacity="0.5" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="1" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<ContentPresenter TextBlock.FontSize="{TemplateBinding FontSize}" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="button" Property="Background" Value="#e3e3e3" />
<Setter TargetName="border1" Property="BorderBrush" Value="#00395c" />
<Setter TargetName="border2" Property="BorderBrush" Value="#727272" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#c6c3c6" />
</Style>
</Button.Style>
</Button>
I have a TextBox input field with a custom style:
<TextBox Style="{StaticResource SettingsTextBoxHint}" KeyDown="textBoxInput_KeyDown" PreviewKeyDown="textBoxInput_PreviewKeyDown" Name="TextBoxInput" Text="{Binding TextBoxInput, Mode=TwoWay}" Tag="{lex:LocText TypeAMessageHere}" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" FontSize="14" HorizontalAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Center" BorderThickness="0" Margin="0,0,33,0"/>
To which I added the custom style:
<Style TargetType="{x:Type TextBox}" x:Key="SettingsTextBoxHint" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border x:Name="Border"
BorderThickness="{TemplateBinding BorderThickness}"
Background="White"
Padding="1,2,5,2"
BorderBrush="{StaticResource PrimaryColor}"
ToolTip="{TemplateBinding ToolTip}">
<Grid>
<TextBox Text="{Binding Path=Text,
RelativeSource={RelativeSource TemplatedParent},
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
x:Name="textSource"
Background="Transparent"
BorderBrush="Transparent"
TextWrapping="{TemplateBinding TextWrapping}"
Panel.ZIndex="2"
FontSize="12">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border x:Name="Border"
Background="Transparent"
BorderBrush="Transparent"
CornerRadius="0">
<ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
<TextBox Margin="0,3,0,0" BorderThickness="0" Text="{TemplateBinding Tag}" Background="{TemplateBinding Background}" Panel.ZIndex="1">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="FontFamily" Value="{StaticResource RobotoRegularFont}" />
<Setter Property="Foreground" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Text, Source={x:Reference textSource}}" Value="">
<Setter Property="Foreground" Value="#cccccc"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="BorderBrush" Value="DarkGray"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="textSource" Property="FocusManager.FocusedElement" Value="{Binding ElementName=textSource}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The point of which is to make the TextBox transparent and to add hint functionality which text is set trough Tag.
Everything works exactly as I want. The problem I have is that I am writing a new functionality in which I need the position of cursor in the TextBox. But SelectionStart or CaretIndex always return 0 value. If I remove my style I get the correct value.
Can anyone tell me what I missed?
The problem is that you are using a TextBox within a TextBox. The user interacts with the inner text box, whose text, caret position, etc. are in no way related to the outer text box.
Let me clean up your style for you:
<Style x:Key="SettingsTextBoxHint"
TargetType="{x:Type TextBox}"
BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="BorderBrush"
Value="{StaticResource PrimaryColor}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border x:Name="Border"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
Padding="{TemplateBinding Padding}">
<Grid>
<ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center" />
<TextBlock x:Name="Hint"
Margin="3,1"
Text="{TemplateBinding Tag}"
FontStyle="Italic"
Foreground="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"
Visibility="Hidden" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border"
Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<Trigger Property="Text" Value="">
<Setter TargetName="Hint" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To find the cursor position within the TextBox, you can use Mouse.GetPosition(your_text_box). To get the caret position within the text, use the CaretIndex property. Note, however, that CaretIndex is *not* a dependency property, so it does not raise change notifications. Thus, you cannot bind to it and expect the binding target to be updated.
I have the following xaml-code to set a border on a checkbox if the checkbox is checked.
<StackPanel Orientation="Vertical">
<StackPanel.Resources>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="Margin" Value="2"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" Value="Lime"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<CheckBox Content="Use Method 1" />
<CheckBox Content="Use Method 2" />
<CheckBox Content="Use Method 3" />
</StackPanel>
Unfortunately this doesn't work. If I check a CheckBox, nothing happens to the border.
What is wrong with this xaml-code?
You'd need a custom check box template. See below the Aero default style with the modifications that you need:
<SolidColorBrush x:Key="CheckBoxFillNormal" Color="#F4F4F4"/>
<SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>
<Style x:Key="EmptyCheckBoxFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="1" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CheckRadioFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="{StaticResource CheckBoxFillNormal}"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
<BulletDecorator.Bullet>
<Microsoft_Windows_Themes:BulletChrome BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
</BulletDecorator.Bullet>
<Border x:Name="ContentBorder" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" TargetName="ContentBorder" Value="Lime"/>
</Trigger>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
<Setter Property="Padding" Value="4,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can add a setter to change border brush of BulletChrome when check box is checked (add a name for bullet chrome and duplicate the setter in trigger for IsChecked, just change the name in the new setter)
EDIT:
Oh, and you'd need this xmlns definition:
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
(of course you'd need a reference to PresentationFramework.Aero assembly)
I'm trying to make a template that will change a Button's background as well as the color of it's TextBlock. I tried the following XAML in my template, but it just makes the button dissapear on mouseover. Is there any way to change the properties of a buttons contents on triggers?
<ControlTemplate TargetType="{x:Type Button}">
<Border
x:Name="Border"
CornerRadius="0"
BorderThickness="0"
Background="{x:Null}"
BorderBrush="#FF404040" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="TextBlock">
<TextBlock Foreground="Blue" />
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Style:
<Style TargetType="{x:Type Button}" x:Key="MyButton">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border"
CornerRadius="0"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
TextBlock.Foreground="{TemplateBinding Foreground}"
BorderBrush="#FF404040">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter TargetName="Border" Property="TextBlock.Foreground" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage:
<Button Width="100" Height="50" Content="Lalala" Style="{StaticResource MyButton}" Background="Brown" Foreground="Green" BorderThickness="2"></Button>
You're missing the ContentPresenter, responsible for visualizing the Content property of the Button.
To set the foreground you can use TextBlock.Foreground attached property.
Control Styles and Templates has always been very usefull to me :)