WPF ToggleButton disappear when checked if I use ControlTemplate - c#

There is something I'm missing but I do not understand what:
If I do this:
<ToggleButton Content="" FontFamily="Segoe MDL2 Assets" />
The button changes like this when pressed
But if I change it using the template then it disappears:
<ToggleButton>
<ToggleButton.Template>
<ControlTemplate>
<TextBlock Style="{StaticResource LargeIconStyle}" Text=""/>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
Before check:
After check:
I cannot understand why.
Can you help me?
The color of the checked button is the system one.
Just for your reference the styles are:
<Style
x:Key="LargeIconStyle"
BasedOn="{StaticResource BaseIconStyle}"
TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="32" />
</Style>
<Style x:Key="BaseIconStyle" TargetType="{x:Type TextBlock}">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextAlignment" Value="Center" />
</Style>

The problem is that you're using a ControlTemplate and the Template property. These are used for the UI and functionality of the control. So essentially, you're turning your control into a TextBlock.
Instead, you want to use a DataTemplate and the ContentTemplate property.

Related

BorderBrush in wpf doesn't work

I am trying to replace this default border color in a groupbox but it doesn't work.
here code snippet:
<GroupBox x:Name="groupBox" BorderBrush="Red" BorderThickness="5" HorizontalAlignment="Center" Height="278" Margin="107,74,33,0" VerticalAlignment="Top" Width="760">
<GroupBox.Header>
<Border Background="#FFDAD5D5" BorderBrush="#FFDAD5D5" BorderThickness="56">
<TextBlock Text="Installation data" />
</Border>
</GroupBox.Header>
Try to use Style definitions, like this: How to use style for GroupBox header?.
You can avoid, that any other style will override yours.
Besides your code gets a cleaner structure and you can re-use this style for other GroupBoxes.
<Style x:Key="MyGroupeBoxStyle" TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Height" Value="278"/>
<Setter Property="Width" Value="760"/>
<Setter Property="Margin" Value="107,74,33,0"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="#FFDAD5D5" BorderBrush="#FFDAD5D5" BorderThickness="56">
<Label Text="{Binding}"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Use it as follow:
<GroupBox x:Name="groupBox"
Style="{StaticResource MyGroupeBoxStyle}"
Header="Installation data" />
i think GroupBox is inside another control which overlays your Border.
Maybe you can try to place your GroupBox to the front - just to try
Let me know whats happening.
Greedings

Show 4 digits after comma WPF

I have developed WPF code; I'm showing a figure like 0.77. But I want to show a figure like 0.7777.
I have two separate styles for both GridColumn and TextBox.
My code for gridcolumn is:
<Style TargetType="{x:Type dxg:GridColumn}" x:Key="dxGridColumnNumber" >
<Setter Property="ColumnHeaderContentStyle" Value="{DynamicResource dxHeaderContentControl}" />
<Setter Property="CellTemplate">
<Setter.Value>
<DataTemplate>
<dxe:TextEdit Name="PART_Editor" Mask="N2" MaskType="Numeric" HorizontalAlignment="Right" MaskUseAsDisplayFormat="True"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Also This is for textbox:
<Style TargetType="{x:Type dxe:TextEdit}" x:Key="dxTextEditTutarText" BasedOn="{StaticResource dxTextEditBaseText}">
<Setter Property="MaskUseAsDisplayFormat" Value="True" />
<Setter Property="MaskType" Value="Numeric" />
<Setter Property="Mask" Value="N2" />
<Setter Property="HorizontalContentAlignment" Value="Right"/>
</Style>
Change the mask to "N4". In Your code, you set the mask to "N2" twice, which is unnecessary.
Just change
<Setter Property="Mask" Value="N2" />
to
<Setter Property="Mask" Value="N4" />
and remove Mask property in you TextExit (or the other way round)
For more options see https://msdn.microsoft.com/en-us/library/dwhawy9k(v=vs.100)
And the DevExpress documentation: https://documentation.devexpress.com/WindowsForms/1498/Controls-and-Libraries/Editors-and-Simple-Controls/Simple-Editors/Concepts/Masks/Mask-Type-Numeric

XAML partial styling?

I have these controls:
<Border Style="{StaticResource Button}">
<TextBlock>NEW</TextBlock>
</Border>
<Border Style="{StaticResource Button}">
<TextBlock>CLOSE</TextBlock>
</Border>
<Border Style="{StaticResource Button}">
<TextBlock>EXIT</TextBlock>
</Border>
And this style:
<Style x:Key="Button" TargetType="{x:Type Border}">
<Setter Property="Padding" Value="15, 10" />
<Setter Property="Margin" Value="5, 0" />
<Setter Property="MinWidth" Value="150" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style.Resources>
</Style>
And I want to set each button/border to a specific, different color each, and another color for IsMouseOver.
I tried setting the Background on the control, but then the style can't overwrite the background and I can't do the IsMouseOver change.
I can only think of creating a different style for each one with their colors, but is there anyway to do a partial styling, like how you'd do in CSS?
<div class="button blue">NEW</div>
<div class="button red">CLOSE</div>
<div class="button gray">EXIT</div>
Or any other way to achieve this?
I haven't done any XAML in a while, so I'm a tad rusty. I'm pretty sure you can't do partial styles, but I know you can inherit styles using "BasedOn".
https://msdn.microsoft.com/en-us/library/system.windows.style.basedon(v=vs.110).aspx
This will allow you to do your base button style, and then create a color variant for each color you need based upon the common style features.
<Style x:Key="Button" TargetType="{x:Type Border}">
<Setter Property="Padding" Value="15, 10" />
<Setter Property="Margin" Value="5, 0" />
<Setter Property="MinWidth" Value="150" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style.Resources>
</Style>
<Style x:Key="ButtonBlue" TargetType="{x:Type Border}" BasedOn="{StaticResource Button}">
<Setter Property="Background" Value="Blue" />
</Style>
Something like that, and then you use "ButtonBlue" instead of "Button" as the static resource you're referencing in the XAML for the control that you want to be blue. You should be able to add triggers as well in the inheriting style. Hopefully I'm remembering my syntax correctly.
Also, you may want to change the style Key to something other than "Button". Could be a bit confusing.

How to make style to extend but not override other styles

On the current window I have a Grid with multiple controls (labels, textboxes, buttons).
General styles are set in App.xaml. Extensions for each control are set in Grid resources.
Each control visibility is determined by viewmodel property value. Not to bind each controls visibility to it (it uses custom converter and this will cause lots duplications) I wish to have "MyVisible1" style.
The problem is if I apply this style it overlaps other properties. What value should I use in "BasedOn"? Or what else can I do to implement it?
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Control}" x:Key="MyVisible1">
<Setter Property="Visibility" Value="{Binding ...}" />
</Style>
<Style TargetType="Label" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Width" Value="80" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Width" Value="45" />
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
</Grid.Resources>
<TextBox Grid.Column="0" Grid.Row="0" Style="{StaticResource MyVisible1}"/>
</Grid>
The only way that I can imagine that you can do this is to define a local implicit Style for this:
<Style TargetType="{x:Type Control}">
<Setter Property="Visibility" Value="{Binding ...}" />
</Style>
By not defining an x:Key, this Style will be implicitly applied to all controls that extend the Control class and by declaring it locally, it will only apply to those elements in the current focus scope. So defining it in a Grid.Resources section will implicitly apply it to all controls within that Grid. You are then free to apply whatever additional Styles that you want to these controls.

Abstract border and text block into another style/template in WPF

First of all, I would like to add customized text blocks to my GUI with the least possible overhead. For instance: <TextBlock style={StaticRessources myTextBlock}>Text</TextBlock>
For now I have the following border style:
<Style x:Key="greenBox" TargetType="Border">
<Setter Property="Background" Value="#00FF00"/>
<Setter Property="CornerRadius" Value="10"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="100"/>
</Style>
And I apply it in the following way:
<Border Style="{StaticResource greenBox}">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Custom Text</TextBlock>
</Border>
My problem is, it needs 2 Tags and the properties set in the TextBlock will be redunant. I cannot figure out how to abstract both definitions into a single element.
that's where Label comes into play:
<Style TargetType="Label" x:Key="greenLabel">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Border Style="{StaticResource greenBox}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Label Style="{StaticResource greenLabel}">Custom Text</Label>
(in accordance with your other question: if this is the only place you use that borderstyle you can of course include these directly in that border not using an extra style)
You would need to create a custom control as described here. Or you could create a UserControl as well.

Categories