On my whole application, I've some underscores (_) which are not displayed.
It's due to the accessor. But how can I disable it? Application wide? I don't have them on labels, textboxes, ...
Thank you
To disable underscores globally for all labels you can override the default template for labels like this:
<Style x:Key="{x:Type Label}"
TargetType="{x:Type Label}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Border Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="False"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It differs from the default template in this line: RecognizesAccessKey="False".
Put this style in global resources of your application (App.xaml) and your labels will not recognize underscores anymore.
Use two underscores:
name = "__something";
One easy solution is to not use <Label>. <TextBox> doesn't mess with underscores.
Have you tried doubling the underscores?
Related
I have simple ToggleButton and when IsChecked i want to change only the text.
I want all other properties like border and background will be Transparent but it seems that i still have this background style:
<ToggleButton x:Name="changeButBorderedBlinky" Content="EDIT" Width="40" Height="40" Background="Transparent">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Content" Value="Done"/>
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
One thing that is often annoying is some visual aspects of the default WPF controls are coded in a way so as they are not configurable. The MouseOver Background is an example (scrollbar sizes is another... grrr!!!). You can solve this though by defining your own Template for the ToggleButton and eliminate that MouseOver trigger. Here is a simple example:
<ToggleButton x:Name="changeButBorderedBlinky" Width="40" Height="40" Background="Transparent">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="EDIT"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<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>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Content" Value="Done"/>
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
Also, in order to change a property in a trigger it has to be set in a style, not directly. That is why your Content doesn't change in your MouseOver Trigger. If you remove the property setting for it and
add it into the Style with a Setter, it will allow the trigger to change it.
One downside to all this is it overrides all the default template triggers so you won't see when the ToggleButton is checked anymore unless you add a trigger for "IsChecked" too. (and if you need to alter the Background in the trigger, move the Background Property to a Setter like I did for Content)
Hope that helps...
Sorry to revive an old thread, but (for someone struggling) the following worked for me. This can be in App.xaml file under Application.Resources tag or directly in the Window.Resources. I originally needed it for a UWP application, then had to adapt for WPF for a different project:
<Style TargetType="ToggleButton" x:Key="TransparentToggleButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="RootGrid" Background="Transparent">
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then just style your ToggleButton:
<ToggleButton Style="{StaticResource TransparentToggleButtonStyle}">
(whatever content you want to present)
</ToggleButton>
Hope this helps someone,
In the illustration below you can see a custom control that I'm currently creating with a view to learning as much as I can about the whole process of control creation.
Currently I'm trying to both simplify the xaml by effectively refactoring repetitive style elements out into a separate style and achieve a disabled look for images when the buttons in which they are situated are disabled.
In the xaml below you can see both the button style I've created and the data trigger for the image. In theory both are being applied to the second button on the left, but quite clearly they aren't being.
I think that the basic style definitions are correct but it may be that they are in the incorrect place. Can anyone advise as to what it is that I'm currently doing wrong.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ViewToLearn.WpfControls">
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type UIElement}, AncestorLevel=1}, Path=IsEnabled}"
Value="False">
<Setter Property="Opacity"
Value="0.2"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Margin"
Value="4" />
</Style>
<Style TargetType="{x:Type local:VtlDataNavigator}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:VtlDataNavigator}">
<StackPanel Orientation="Horizontal">
<Button BorderBrush="Transparent"
Background="Transparent"
BorderThickness="0">
<StackPanel Margin="4">
<Image Source="/ViewToLearn.WpfControls;component/Resources/Images/button_rounded_blue_first24.png" />
</StackPanel>
</Button> <!-- This is the button that should be influenced by the style and trigger defined above, but clearly it isn't -->
<Button IsEnabled="False">
<StackPanel Margin="4">
<Image Source="/ViewToLearn.WpfControls;component/Resources/Images/button_rounded_blue_previous24.png" />
</StackPanel>
</Button>
<TextBox Text="{Binding Path=RecordIndex,RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Center"
IsReadOnly="True"
BorderThickness="0"
Margin="4" />
<TextBlock Text="of"
VerticalAlignment="Center"
Margin="4" />
<TextBlock Text="{Binding Path=RecordCount,RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Center"
Margin="4" />
<Button BorderBrush="Transparent"
Background="Transparent"
BorderThickness="0">
<StackPanel Margin="4">
<Image Source="/ViewToLearn.WpfControls;component/Resources/Images/button_rounded_blue_next24.png" />
</StackPanel>
</Button>
Your second button has IsEnabled="false"
That makes the difference.
But if you want the background to be the same for all buttons, enabled or not, you have to got in the triggers.
The best way to generate the default style and template with triggers is to put a dummy/test button in a window, right click on it, Edit Template/Edit a copy.
VS will generate much code. You 'll see inside the "full" template" of the button + the triggers.
Inside there is a trigger for different appearance when disabled :
<Setter Property="Template" >
<Setter.Value>
<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="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>
</Setter.Value>
</Setter>
It's that template you can take inspiration from to update your style (without trigger when disabled):
<Style TargetType="{x:Type Button}">
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Margin"
Value="4" />
<Setter Property="Template" >
<Setter.Value>
<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>
<!-- no trigger int he template -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Notes regarding your code because it seems you are eager to learn :
Don't have to set Background, BorderThickness, BorderBrush for every button, it is already done in your Button style
The StackPanel around every Image is the same and can be put inside the template around the ContentPresenter tag
If VtlDataNavigator is a Usercontrol, you can put all the content of <ControlTemplate TargetType="{x:Type local:VtlDataNavigator}"> inside the <UserControl> tag.
It makes the control more reusable (don't have to provide the template in every Window for the control)
Regards
How I can bottom align text in RichTextBox? It seems that control doesn't support it directly. So I am looking for ways to emulate it. Ideally I would have the boundary of the control fixed and end of text aligned with the bottom.
The text comes from a ScrollViewer named PART_ContentHost inside the default control template for the TextBoxBase which is wrapped by the RichTextBox. You should override the control template and either have the ScrollViewer declare its VerticalAlignment to be Bottom, or have it template bind to the VerticalContentAlignment.
Below, I've done the latter. This is a modified version of the default control template as pulled from Blend. The only change I've made is to add VerticalAlignment="{TemplateBinding VerticalAlignment}" to the ScrollViewer.
(Also note that it references Microsoft_Windows_Themes which is defined as xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
I am unsure how this will work if Aero is not on the user's machine)
<Style x:Key="BottomAlignedTextBoxBaseStyle"
TargetType="TextBoxBase"
BasedOn="{StaticResource {x:Type TextBoxBase}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
<ScrollViewer x:Name="PART_ContentHost"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Microsoft_Windows_Themes:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Background"
TargetName="Bd"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then, to use it, simply say:
<RichTextBox Style="{StaticResource BottomAlignedTextBoxBaseStyle}"
VerticalContentAlignment="Bottom" />
I have a label in WPF which I want to restyle so it has rounded corners.
I have the below code already:
<Style TargetType="{x:Type Label}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Margin" Value="2,2,2,2"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Blue"/>
</Style>
Can anyone please assist with how I would add a corner Radius to this label
many thanks
You'll need to change the ControlTemplate for the Label in order to get rounded corners. The Label control itself doesn't expose a CornerRadius property.
Add the following to your Style and you'll get rounded edges on your Label. I arbitrarily set it to "3" below, but you can set it to whatever your needs dictate.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true"
CornerRadius="3">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Using the Border element would be simpler.
<Border CornerRadius="10" BorderThickness="2" BorderBrush="Blue" Background="Red" Margin="2">
<Label Content="Lorem ipsum" />
</Border>
I am replacing the style of a radio button with that of a check box. I know you are going to say that is a bad idea, but it really needs to work this way. Anyway, using Expression Blend I was able to extract the style of the CheckBox and apply it to a RadioButton. My only problem is now that when it draws there is no border. Can anyone tell me why? Here is the code (THIS HAS BEEN UPDATED SINCE THE ORIGINAL POST):
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Royale"
Title="Customized RadioButton" Width="496" ShowInTaskbar="True" ResizeMode="NoResize" Height="105">
<Window.Resources>
<SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>
<Style x:Key="RadioButtonCheckBoxStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</BulletDecorator>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<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>
</Window.Resources>
<StackPanel>
<CheckBox Height="16" Name="checkBox1" Width="120">CheckBox</CheckBox>
<RadioButton Height="16" Name="radioButton1" Width="120">RadioButton</RadioButton>
<RadioButton Content="RadioButton with CheckBox Style" Margin="4" Style="{DynamicResource RadioButtonCheckBoxStyle}" FocusVisualStyle="{x:Null}" GroupName="Header" IsChecked="False" IsEnabled="True" HorizontalAlignment="Center" />
</StackPanel>
alt text http://img260.imageshack.us/img260/65/33733770.jpg
To see how this displays, please paste it into Visual Studio. You will see that the Customized RadioButton doesn't look correct. It is missing the regular 3D effects that a CheckBox normally has. I don't care about any content (I won't be having any) I just want it to look like a normal CheckBox.
Since you're overriding the template, you need to attach to the class's properties yourself.
Declare a border in the template in the following fashion:
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
Also, you've got a small bug. You've defined the setter for "BorderBrush" multiple times in your style.
Edit: After seeing your image, here's your real issue:
<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
You were missing the BorderThickness in your bullet. It was effectively setting your thickness to 0, which is why you didn't see anything.
An image might help here, but where do you expect the border to be? Are you expecting a border around the entire content?? The only border there should be according to the template you're using is around where the check mark will be. If you want a border around all the content then you need to add a Border into the ControlTemplate like so:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignme nt}" RecognizesAccessKey="True"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<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>
Side note: You have set FocusVisualStyle="{x:Null}" on the Checkbox itself, but your template changes this property in its HasContent property trigger. If you really don't want a FocusVisualStyle you should remove that setter.