changing background color of togglebutton when checked - c#

I am trying the distinguish the state of the toggle button when clicked. I have the snippet below
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="DimGray"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Height="60" Content="Text" Style="{StaticResource OnOffToggleImageStyle}">
</ToggleButton>
</Grid>
</Window>
However this does not work when IsChecked value is set to "True" in the style. When set to false it works.
I wonder why. Any answers!

When running your code sample, it appears the style is conflicting with the 'chrome' of the ToggleButton (i.e. the original style of the button).
It would probably be better in this situation to override the template of the ToggleButton to behave in the manner you desire. An ugly example can be found below:
<Style x:Key="myToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="outer"
BorderBrush="White"
BorderThickness="2"
Opacity=".9"
Background="Transparent">
<Border x:Name="inner"
Margin="8"
BorderThickness="0"
Background="{
Binding Background,
RelativeSource={RelativeSource TemplatedParent}}">
<Grid x:Name="container">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="display"
Grid.Row="1"
Text="{Binding Content, RelativeSource={
RelativeSource TemplatedParent}}"
Foreground="White"
FontSize="11"
FontFamily="Segoe UI"
FontStyle="Normal"
FontWeight="Normal"
Margin="8,0,0,4"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="outer" Property="Background" Value="LightBlue"/>
<Setter TargetName="outer" Property="BorderBrush" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Related

How to apply App.XAML style to current window

I am trying to apply validation error template and defining style in App.XAML.
<Application x:Class="MY.UI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:BP.NES.UI"
>
<Application.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Grid>
<Border BorderBrush="#FFCB2E2E" BorderThickness="1" Background="#11FF0000" IsHitTestVisible="False" x:Name="errorBorder"/>
<AdornedElementPlaceholder x:Name="placeholder" />
<Popup AllowsTransparency="True" HorizontalAlignment="Right" HorizontalOffset="0" VerticalOffset="0" PopupAnimation="Fade" Placement="Left"
PlacementTarget="{Binding ElementName=errorBorder}" IsOpen="{Binding ElementName=placeholder, Path=AdornedElement.IsFocused, Mode=OneWay}">
<StackPanel Orientation="Horizontal">
<Polygon VerticalAlignment="Center" Points="0,4 4,0 4,8" Fill="#FFCB2E2E" Stretch="Fill" Stroke="#FFCB2E2E"
StrokeThickness="2" />
<Border Background="#FFCB2E2E" CornerRadius="4" Padding="4">
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold" Margin="2,0,0,0"
Text="{Binding ElementName=placeholder, Path=AdornedElement.ToolTip, Mode=OneWay}" />
</Border>
</StackPanel>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
</Application>
Now in My Main Window I have following code:
<Window x:Class="MY.UI.View.MainWindow"
xmlns:local="clr-namespace:MY.UI.View"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
xmlns:vm="clr-namespace:MY.UI.ViewModel"
xmlns:rules="clr-namespace:MY.UI.Validations"
>
<Grid x:Name="MainGrid">
<TextBox Grid.Row="1"
x:Name="CellphoneNumberTextBox"
Grid.Column="1"
VerticalAlignment="Stretch"
Margin="10,0,0,10"
IsEnabled="{Binding ElementName=PereferenceRadio,Path=IsChecked}"
Text="{Binding CurrentEnrolmentDetail.CellNumber,NotifyOnValidationError=True,ValidatesOnNotifyDataErrors=True,UpdateSourceTrigger=PropertyChanged}">
</TextBox>
</Grid>
</Window>
If I move style to Window.Resources, it just works fine ,but when I have this in App.XAML , does not work. Is this due to difference in namespace?
Set a style key in App.Xaml and use the key in your Textbox.
Example:
App.Xaml
<Style x:Key="HeaderStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="Gray" />
<Setter Property="FontSize" Value="24" />
</Style>
Window:
<Window x:Class="WpfTutorialSamples.Styles.ExplicitStyleSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ExplicitStyleSample" Height="150" Width="300">
<StackPanel Margin="10">
<TextBlock>Header 1</TextBlock>
<TextBlock Style="{StaticResource HeaderStyle}">Header 2</TextBlock>
<TextBlock>Header 3</TextBlock>
</StackPanel>
</Window>
Or Override using BasedOn functionality
Try this if you don't have interest to create style key
App.Xaml
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<!-- ... -->
</Style>
I have declared my base styles in a ResourceDictionary in App.xaml, if i override them in a specific window like this, it usually works.
If all TextBox will remain similar thought application than use following in resource file.
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Background" Value="Blue"/>
</Style>
Else create key in App.xaml and use in the TextBox's where required as shown below:
<Style x:Key="TextboxBackgroundColor" TargetType="TextBox">
<Setter Property="Background" Value="Cyan"/>
</Style>
<TextBox x:Name="txtText" Style="{StaticResource TextboxBackgroundColor}" />

WPF Listbox with separators, missing highlighted colors

I have a listbox (C# WPF) which gets filled on startup. I would like a separator between every item in the list and I have found this code from another old post and it's actually working, but when I use the code, I loose the highlighted and selected colors instead and I can't figure out where it's going wrong.
How can I get back those highlighted and selected colors?
Here is the code I'm using.
<ListBox x:Name="radioBox" HorizontalAlignment="Left" Height="494" Margin="14,14,0,0" VerticalAlignment="Top" Width="287" Background="{x:Null}" FontFamily="Calibri" FontWeight="Thin" FontSize="25" Foreground="#FFEDEDF7" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="1" Padding="30,30,0,0" >
<ListBox.ItemBindingGroup>
<BindingGroup/>
</ListBox.ItemBindingGroup>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<StackPanel>
<Separator x:Name="Separator" Background="White" Opacity="0.1" Height="20"/>
<ContentPresenter/>
</StackPanel>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Try below code. It's a sample done by me and it should work.
<Window x:Class="ListBoxStyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:ListBoxStyle"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="_ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox ItemContainerStyle="{DynamicResource _ListBoxItemStyle}"
Width="200" Height="250"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>Hi</ListBoxItem>
</ListBox>
</Grid>

Buttons in window title bar

I'm trying to implement custom window chrome. I'm using Miscrosoft.Windows.Shell namespace. When I place button on title bar, it's transparent to events. Default button should have light blue background, when I hover mouse over it, but it doesn't have this effect. Another buttons that are not inside title bar fire events properly.
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell"
Title="MainWindow" Height="600" Width="800" Background="#2D2D30" Name="MyWindow"
WindowStartupLocation="CenterScreen" AllowsTransparency="True" WindowStyle="None">
<Window.Style>
<Style TargetType="Window">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome CaptionHeight="25" GlassFrameThickness="0"
CornerRadius="0" ResizeBorderThickness="7"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="WindowState" Value="Maximized">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome CaptionHeight="32" GlassFrameThickness="0"
CornerRadius="0" ResizeBorderThickness="7"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Style>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Margin" Value="7,0,7,7"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=MyWindow, Path=WindowState}" Value="Maximized">
<Setter Property="Margin" Value="7,7,7,7"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel LastChildFill="False" Grid.Row="0" Height="32">
<Button DockPanel.Dock="Right" Width="32" Height="32"/>
</DockPanel>
<Border Background="#1E1E1E" Grid.Row="1">
<Button Width="100" Height="100"/>
</Border>
</Grid>
you should add the attached property "shell:WindowChrome.IsHitTestVisibleInChrome" = true, this should fix your bug.

Show/Hide Left and Right Border in WPF RichTextBox codebehind?

I want to hide/show WPF RichTextBox left border sometimes in code behind and also for right border sometimes.
Can this be achieved?
I've already tried in XAML like this borderthickness ="3,3,0,3". It hides my right side, now I need to show that right side border and also hide my right side border.
How do I do that?
Updated:
<Window x:Class="View.SingleLineTextMode"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SingleLineTextMode" Height="300" Width="300" WindowState="Maximized" WindowStyle="None" WindowStartupLocation="CenterScreen" Background="Black">
<Window.Resources>
<Style x:Key="MyStyle" BasedOn="{x:Null}" TargetType="{x:Type RichTextBox}">
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="Padding" Value="0,5,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RichTextBox}">
<Border x:Name="bg" BorderBrush="Yellow" BorderThickness="3,3,0,3" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="PART_ContentHost" IsDeferredScrollingEnabled="True" CanContentScroll="False" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="bg" Value="Yellow"/>
<Setter Property="BorderThickness" TargetName="bg" Value="3,3,0,3"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" TargetName="bg" Value="Yellow"/>
<Setter Property="BorderThickness" TargetName="bg" Value="3,3,0,3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<!--<RichTextBox Name="txtAppendValue" Height="60" Width="1920" Style="{StaticResource MyStyle}" Margin="0,0,-10,0" FontSize="60" FontFamily="Arial" IsReadOnly="True" Focusable="False" Cursor="Arrow" BorderThickness="3,3,3,3" IsUndoEnabled="False" UndoLimit="0" TextOptions.TextFormattingMode="Display" VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling" VirtualizingPanel.CacheLength="2,3" VirtualizingPanel.CacheLengthUnit="Page" TextBlock.LineHeight="100" Padding="0">
</RichTextBox>-->
<RichTextBox Name="txtAppendValue" HorizontalAlignment="Center" VerticalAlignment="Center" Height="60" Width="1920" Style="{StaticResource MyStyle}" Margin="0,0,0,0" FontSize="40" FontFamily="Arial" IsReadOnly="True" Focusable="False" Cursor="Arrow" IsUndoEnabled="False" UndoLimit="0" TextOptions.TextFormattingMode="Display" VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling" VirtualizingPanel.CacheLength="2,3" VirtualizingPanel.CacheLengthUnit="Page" TextBlock.LineHeight="100" >
</RichTextBox>
<Label Name="lblStatusUpdate" ></Label>
</Grid>
</Window>
The above one is my XAML.
txtAppendValue.BorderThickness=new Thickness("0,3,0,3");
But its not working.
Regards
Arjun
You can do the same thing from code like this:
myRichTextBox.BorderThickness = new Thickness(3,3,0,3);
Then if all borders need to have same thickness, you can use only one number:
myRichTextBox.BorderThickness = new Thickness(3);
Edit:
Since you are using style, you can define multiple styles and then switch between them:
<Style x:Key="MyStyleNoBorders" BasedOn="{x:Null}" TargetType="{x:Type RichTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RichTextBox}">
<Border x:Name="bg" BorderBrush="Yellow" BorderThickness="0,3,0,3" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="PART_ContentHost" IsDeferredScrollingEnabled="True" CanContentScroll="False" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyStyleBothBorders" BasedOn="{x:Null}" TargetType="{x:Type RichTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RichTextBox}">
<Border x:Name="bg" BorderBrush="Yellow" BorderThickness="3" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="PART_ContentHost" IsDeferredScrollingEnabled="True" CanContentScroll="False" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Make sure your RichTextBox is not too wide to fit the screen, or you will not be able to see the borders. Then in code just use a call to change styles:
txtAppendValue.Style = FindResource("MyStyleNoBorders") as Style;
and
txtAppendValue.Style = FindResource("MyStyleBothBorders") as Style;

DoubleUpDown custom style wpf

I want to make custom style for doubleupdown button like on example.
Example:
What i have
main problem is that <RepeatButton x:Name="PART_IncreaseButton" Grid.Row="0" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource CustomRepeatButtonStyle}"/> does not respond when i am clickin on it why?
Xaml code of me freak:
<Window.Resources>
<Style x:Key="CustomRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid x:Name="customgrid" Background="White">
<Polygon x:Name="custompolygon" Points="1,11 6,1 11,11" Fill="SkyBlue" VerticalAlignment="Center" HorizontalAlignment="Center">
</Polygon>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="custompolygon" Property="Fill" Value="black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomDoubleUpDownStyle" TargetType="{x:Type xctk:DoubleUpDown}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xctk:DoubleUpDown}">
<Border BorderThickness="1" BorderBrush="Purple">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<RepeatButton x:Name="PART_IncreaseButton" Grid.Row="0" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource CustomRepeatButtonStyle}"/>
<RepeatButton x:Name="PART_DecreaseButton" Grid.Row="1" IsTabStop="{TemplateBinding IsTabStop}"/>
</Grid>
<ContentPresenter Grid.Column="1" Content="{TemplateBinding Property=Value}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<xctk:DoubleUpDown Width="180" Height="70" Style="{StaticResource CustomDoubleUpDownStyle}" Value="20"/>
</Grid>
In your XAML there are no functions bound to the click event (or any other event). In other words: From the programs point of view there is nothing to do, when any of your buttons get clicked. Is this your problem?
In this case add event handlers and modify the counter in your model accordingly.

Categories