Label and Expander control with rounded corners - wpf

Hi I try make a style with rounded corners for label and expander control.
Label style:
<Style x:Key="InfoLabelStyle" TargetType="{x:Type Label}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Border Name="Border" Background="#BFE3FE" BorderBrush="#BFE3FE" BorderThickness="1" CornerRadius="7" Padding="3">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Height" Value="25"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#BFE3FE"/>
<Setter Property="Background" Value="#BFE3FE"/>
<Setter Property="Margin" Value="2,4,0,1" />
<Setter Property="Padding" Value="4,0,0,0" />
</Style>
I use multibinding on this style in view:
<Label Style="{StaticResource InfoLabelStyle}">
<Label.Content>
<MultiBinding StringFormat="{}{0}, {1} rokov">
<Binding Path="Oponent.Info.Sex" Converter="{StaticResource sexConverter}"/>
<Binding Path= "Oponent.Info.Age"/>
</MultiBinding>
</Label.Content>
</Label>
But if I run app, content of this label is empty, binding is good, I try it on textBox control and work.
Second problem is, I would like have also rounded corners on expander control.
I try same way as in label style:
<Style x:Key="InfoExpanderStyle" TargetType="{x:Type Expander}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border Name="Border" Background="#BFE3FE" BorderBrush="#BFE3FE" BorderThickness="1" CornerRadius="7" Padding="3">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Applu style on Expander control:
<Expander Name="InfoExapnder"
Header="{Binding Path=Oponent.Info.Nick, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource InfoExpanderStyle}"
IsExpanded="True"
FontSize="18"
FontWeight="Normal"
Background="#ECEBEB"
Margin="3,0,3,0"
Grid.Row="0">
<Grid>
</Grid>
But result is same, empty content of the control.
What I do bad?

The label is empty because you've re-templated it but not specified where the content should be placed. You want something like:
<ControlTemplate TargetType="{x:Type Label}">
<Border Name="Border" Background="#BFE3FE" BorderBrush="#BFE3FE" BorderThickness="1" CornerRadius="7" Padding="3">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</ControlTemplate>

Related

In Wpf how to avoid/disable mouse hover a button highlight color?

I wonder if there is a way to do it for all the future buttons and other controls or do i need to make a solution for each control/button ? And how to do it ?
I want to disable the mouse hove highlight.
<Button x:Name="btnTest" Content="Start Watching" HorizontalAlignment="Left" Margin="14,241,0,0" VerticalAlignment="Top" Width="109" RenderTransformOrigin="0.484,-0.066" Height="30" FontSize="16" Background="#FFFB0000" Click="btnTest_Click"/>
<TextBox HorizontalAlignment="Left" Height="30" Margin="14,175,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="644"/>
<Button Content="Browse" Margin="673,175,18,0" VerticalAlignment="Top" RenderTransformOrigin="-0.111,0.769" Height="30" FontSize="16"/>
Add it to your ResourceDictionary:
<Style TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Padding="4,2"
BorderBrush="DarkGray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And since Style has no key it will be on all the buttons
You'll need to create a style. if you want it to be applied through your whole app, you'll need to put it into your "app.xaml" file (within an application.Resources).
Bellow is an example of how to do it. I added some stuff like setters to illustrate that you can add properties, you could also add triggers and many things.
Not setting a "x:key" to your style will make them the default one (thus overriding the basic one), as the one below, if you wish to have a collection of styles, give them keys.
`<Style TargetType="{x:Type Button}">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Cursor"
Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center">
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>`

Define Style of DataGridTextColumn tooltip

I am trying to change the style of the tooltip of DataGridTextColumn, But the xaml code below doesn't work. When I run the application, custom tooltip is shown and System.Windows.Style is written in it. The button isn't shown too. Where do I have mistake?
<DataGrid.Columns>
<DataGridTextColumn Width="*" Binding="{Binding W_NAME}" Header="Name">
<DataGridTextColumn.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="ToolTip">
<Setter.Value>
<Style TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="HasDropShadow" Value="True"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Content" Value="mytext"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border Name="RootElement" CornerRadius="2,2,0,0">
<Border.Background>
<SolidColorBrush x:Name="BorderBrush" Color="Black"/>
</Border.Background>
<Grid Margin="4" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
TextElement.FontFamily="{DynamicResource Glaho}"
Content="{TemplateBinding Content}"
Margin="4,5,4,4">
</ContentPresenter>
<Button Content="This is button" HorizontalAlignment="Right" Command="{Binding somecommand}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
You're very close, the problem is you've set the Style as the ToolTip itself:
<Style TargetType="DataGridCell">
<Setter Property="ToolTip">
<Setter.Value>
<Style TargetType="ToolTip"> <-------------- badness!
What you need to do is set a ToolTip control as the ToolTip, and then set the Style on that:
<Style TargetType="DataGridCell">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip>
<ToolTip.Style>
<Style TargetType="ToolTip">

SurfaceScrollBar won't respond to styling

The application I'm working on has a surfacelistbox whose scrollbar I'm trying to style, but for some reason nothing I'm doing is affecting it.
The style:
<Style TargetType="s:SurfaceScrollBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="s:SurfaceScrollBar">
<Grid x:Name="Root">
<Track Margin="2,6,6,6"
Name="PART_Track"
Grid.Row="1"
IsDirectionReversed="true">
<Track.DecreaseRepeatButton>
<s:SurfaceRepeatButton Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<s:SurfaceThumb Width="10"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<s:SurfaceRepeatButton Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="s:SurfaceRepeatButton">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="s:SurfaceRepeatButton">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type s:SurfaceThumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="s:SurfaceThumb">
<Border CornerRadius="5"
Background="DimGray"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've tried putting this style in app.xaml, in the window's resources, and in the resources of the listbox itself (<s:SurfaceListBox.Resources>), but nothing has any visual effect. However, if I change it to a regular listbox and change the style accordingly (surfaceScrollBar to ScrollBar, etc.), the style is applied fine no matter where I put it, but this breaks touch scrolling.
Am I doing something wrong with the style itself?

how to change the style of a textblock in a button

I need to change the style of a textblock that it is inside a button..
here are my two styles:
<Style x:Key="btnStyleLR" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI Light" />
<Setter Property="FontSize" Value="40" />
<Setter Property="Padding" Value="0,20,0,20" />
</Style>
<Style x:Key="btnStyleLROverride" BasedOn="{StaticResource btnStyleLR}" TargetType="TextBlock">
<Setter Property="FontSize" Value="10" />
<Setter Property="Padding" Value="0,10,0,10" />
</Style>
and then:
<Style x:Key="btnLoginRegister" TargetType="Button">
<Setter Property="Width" Value="400" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border x:Name="brd"
BorderBrush="Orange"
BorderThickness="1"
CornerRadius="6">
<TextBlock HorizontalAlignment="Center"
Style="{TemplateBinding Tag}"
Text="{TemplateBinding Content}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I bind the style in the tag property of the button pero it is not works.
then I have two buttons that I need to change de textblock style:
<Button x:Name="loginBtn"
Style="{StaticResource btnLoginRegister}"
Tag="btnStyleLROverride"
Content="Login" />
and the other:
<Button x:Name="registerBtn"
Content="Register"
Tag="btnStyleLR"
Style="{StaticResource btnLoginRegister}" />
is there another way to change the style with bind that works? thanks
You shouldn't destroy a button's template like that, unless it's only for the purpose of this question. The simple solution to your problem is to simply set the TextBlock as the button's content and then you can change its style without hacking through the templates.
In Tag you have to provide resource value, not string. It should be:
<Button x:Name="loginBtn"
Style="{StaticResource btnLoginRegister}"
Tag="{StaticResource btnStyleLROverride}"
Content="Login" />
Do it same way for other button.
As far as I understood your requirements:
You have two Buttons ("Login" and "Register") which need to be visually reduced (should not use visual states) and which have their own "text style" each (but maybe sharing a base style)? Is this correct?
If this is the case I recommend two different Button Styles (maybe sharing the same base style):
<Button x:Name="loginBtn" Content="Login"
Style="{StaticResource LoginButtonStyle}"/>
<Button x:Name="registerBtn" Content="Register"
Style="{StaticResource RegisterButtonStyle}"/>
And your styles:
<Style x:Key="PlainButtonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI Light"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderBrush="Orange" BorderThickness="1" CornerRadius="6">
<TextBlock Text="{TemplateBinding Content}"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LoginButtonStyle"
BasedOn="{StaticResource PlainButtonStyle}" TargetType="Button">
<Setter Property="FontSize" Value="10"/>
<Setter Property="Padding" Value="0,10,0,10"/>
</Style>
<Style x:Key="RegisterButtonStyle"
BasedOn="{StaticResource PlainButtonStyle}" TargetType="Button">
<Setter Property="FontSize" Value="40"/>
<Setter Property="Padding" Value="0,20,0,20"/>
</Style>
Properties like FontSize and FontFamily are inherited.

AdornerDecorator and tab stop issues

I am using IDataErrorInfo to validate and indicate errors in my text boxes. I am finding I have to tab once for the text box and once for the adornerdecorator.
I have an error template:
<ControlTemplate x:Key="ErrorTemplate">
<StackPanel KeyboardNavigation.IsTabStop="False" >
<Border KeyboardNavigation.IsTabStop="False" BorderBrush="Red" BorderThickness="1" Padding="2" CornerRadius="2">
<AdornedElementPlaceholder KeyboardNavigation.IsTabStop="False" />
</Border>
</StackPanel>
</ControlTemplate>
a textbox template:
<Style x:Key="TextBoxInError" TargetType="{x:Type TextBox}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Margin" Value="0,5,0,5"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="HorizontalContentAlignment" Value="left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid KeyboardNavigation.IsTabStop="False" >
<Border KeyboardNavigation.IsTabStop="False" x:Name="Border" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1" Padding="2" CornerRadius="2">
<ScrollViewer IsTabStop="False" Margin="0" x:Name="PART_ContentHost" Style="{DynamicResource SimpleScrollViewer}" Background="{TemplateBinding Background}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors), Converter={StaticResource errorConverter}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and declare a text box like this:
<AdornerDecorator KeyboardNavigation.IsTabStop="False" >
<TextBox Margin="5,5,5,3" x:Name="txtName" IsEnabled="{Binding EditMode}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"
Text="{Binding ApplicationName, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True, ValidatesOnDataErrors=True}"
Height="25" MaxLength="50" MaxLines="1" Style="{StaticResource TextBoxInError}"/>
</AdornerDecorator>
If the adorner is round one text box as above then I tab once to leave the text box and once to leave the 'adornment' (it seems) If I have the adorner around a stackpanel of text boxes then I tab once each for the text boxes then have to go back through all the 'adornments' in turn. When tabbing through the adornments the focus goes on the red border defined in the control template..
any ideas?
thanks
Add this to the window's resources section:
<Style TargetType="{x:Type Control}">
<Setter Property="Focusable" Value="False"/>
</Style>
For more information look at my blog: http://www.nbdtech.com/blog/archive/2008/05/25/WPF-Problems-with-Keyboard-Focus-When-Using-Validation.aspx

Resources