Develop Reference

Set Background color of ItemsControl

In my WPF Application, I have Item control which shows Dates and Days of a week.
Now,I need to change the background color of the Item which is today's date.
Here is the XAML code
<ItemsControl Grid.Column="1"
Focusable="False"
ItemsSource="{Binding WeekDays}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate >
<DataTemplate>
<Border BorderBrush="{StaticResource GrayBrush7}"
BorderThickness="1,0,0,0"
SnapsToDevicePixels="True"
UseLayoutRounding="True">
<StackPanel Margin="2"
VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Text="{Binding Day}"
TextAlignment="Center"/>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Text="{Binding Date,
StringFormat='dd/MM/yyyy'}"
TextAlignment="Center"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Thanks in Advance.

You can use DataTrigger in Border Style if you have IsToday property in model class. Like this
public class WeekDay
{
public DateTime Date { get; }
public string Day { get; }
public bool IsToday { get; }
public WeekDay(DateTime date)
{
this.Date = date;
this.Day = date.DayOfWeek.ToString();
this.IsToday = date.Date == DateTime.Today;
}
}
<ItemsControl.ItemTemplate >
<DataTemplate>
<Border BorderBrush="{StaticResource GrayBrush7}"
BorderThickness="1,0,0,0"
SnapsToDevicePixels="True"
UseLayoutRounding="True">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsToday}" Value="True">
<Setter Property="Background" Value="Yellow" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
...
As an alternative, you can use ValueConverter to convert Date to Background.
public class DateToItemBackgroundConverter : IValueConverter
{
private static readonly Brush TodayBGBrush = new SolidColorBrush(Colors.Yellow);
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null || !(value is DateTime))
{
return value;
}
var isToday = ((DateTime)value).Date == DateTime.Today;
return isToday ? TodayBGBrush : null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
<ItemsControl Grid.Column="1"
Focusable="False"
ItemsSource="{Binding WeekDays}">
<ItemsControl.Resources>
<local:DateToItemBackgroundConverter x:Key="bgConverter" />
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate >
<DataTemplate>
<Border BorderBrush="{StaticResource GrayBrush7}"
Background="{Binding Date, Converter={StaticResource bgConverter}}"
BorderThickness="1,0,0,0"
SnapsToDevicePixels="True"
UseLayoutRounding="True">
...
Remember if you wanna refresh background when TODAY is updated, you should rebuild model data or notify PropertyChanged again.

You could just add a Border style with a DataTrigger to your ItemTemplate. Compare the Date property of your DateTime property with the static DateTime.Today property:
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="{StaticResource GrayBrush7}"
BorderThickness="1,0,0,0"
SnapsToDevicePixels="True"
UseLayoutRounding="True">
<Border.Style>
<Style TargetType="Border" xmlns:system="clr-namespace:System;assembly=mscorlib">
<Style.Triggers>
<DataTrigger Binding="{Binding Date.Date}" Value="{x:Static system:DateTime.Today}">
<Setter Property="Background" Value="Yellow" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<StackPanel Margin="2"
VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Text="{Binding Day}"
TextAlignment="Center"/>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Text="{Binding Date, StringFormat='dd/MM/yyyy'}"
TextAlignment="Center"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>

Cross-binding checkboxes - isChecked #1 -> isEnabled #2

I have a ListBox that takes boolean elements from list in my model and represent them as checkboxes. Just after building project the second checkbox isEnabled is set to false. If I modify (eg. cut and paste same converter) binding in the second checkbox in debug, the binding start working correctly. Also I have a global checkboxes that modyfi isChecked properties of all checkboxes from listBox. If I set globalCheckbox #2, all listBox_checkBoxes #2 are set to true and all listBox_checkBoxes #1 isEnabled property are set to false
XAML:
<ListBox x:Name="ListBox_assent" SelectedIndex="-1" Grid.Row="2" ItemsSource="{Binding Path=FullDataAssetList.List}" IsSynchronizedWithCurrentItem="True" Height="Auto">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource MaterialDesignListBoxItem}">
<Setter Property="Margin" Value="2"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Focusable" Value="False" />
<EventSetter Event="RequestBringIntoView" Handler="ListBoxItem_RequestBringIntoView"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Row="0" Opacity="{Binding Path=SkipAssentTemp, Converter={StaticResource BoolToOpacity}}">
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="3">
<CheckBox x:Name="chbx_Assent" HorizontalContentAlignment="Left" FlowDirection="RightToLeft" ToolTip="Skip" IsChecked="{Binding SkipAssent, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsEnabled="{Binding SkipAssentTemp, Converter={StaticResource InverseBoolean}}" LostFocus="chbx_Assent_LostFocus" Background="#FFCB0000"/>
<TextBlock FontSize="16" Text=" / " VerticalAlignment="Center"/>
<CheckBox x:Name="chbx_AssentTemp" HorizontalContentAlignment="Left" FlowDirection="RightToLeft" ToolTip="Skip temp." IsChecked="{Binding SkipAssentTemp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsEnabled="{Binding SkipAssent, Converter={StaticResource InverseBoolean}}" LostFocus="chbx_AssentTemp_LostFocus" Background="#FFCBA300"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Converter:
public class InverseBooleanConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (targetType == typeof(bool) || targetType == typeof(bool?))
{
if ((bool?)value == true)
{
return false;
}
else
if ((bool?)value == false)
{
return true;
}
return null;
}
else
{
throw new InvalidOperationException("The target must be a boolean");
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotSupportedException();
}
}
How can i fix binding to get full functionality just after building?

I have found solution. DataTrigger in xaml was overwritnig isEnabled property

Access element from style WPF

I have a style declared in a ResourceDictionary like so.
<Style x:Key="MapMarkerLabelStyle" TargetType="{x:Type TextBlock}">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="{Binding ActualWidth,
Converter={StaticResource DoubleMultiplierConverter},
ConverterParameter=-0.5}"
Y="-62"></TranslateTransform>
</Setter.Value>
</Setter>
</Style>
And the textblock
<TextBlock Style="{StaticResource MapMarkerLabelStyle}" />
And the converter:
public class DoubleMultiplierConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var originalValue = (double) value;
var format = new NumberFormatInfo {NumberDecimalSeparator = "."};
var multiplier = System.Convert.ToDouble(parameter, format);
return originalValue * multiplier;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
In the translate transform i need to access the textblock ActualWidth property but cant figure out how the binding should look.

The Binding is missing an appropriate source object. To bind to the TextBlock's ActualWidth property, you should set the RelativeSource like this:
<Style x:Key="MapMarkerLabelStyle" TargetType="TextBlock">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform
X="{Binding Path=ActualWidth,
RelativeSource={RelativeSource AncestorType=TextBlock}
Converter={StaticResource DoubleMultiplierConverter},
ConverterParameter=-0.5}"
Y="-62"/>
</Setter.Value>
</Setter>
</Style>

Try this.
<TranslateTransform X="{Binding RelativeSource={RelativeSource Self},
Path=ActualWidth,
Converter={StaticResource DoubleMultiplierConverter},
ConverterParameter=-0.5}"
Y="-62">
</TranslateTransform>

dependency property in custom control not updating

I'm trying to make a custom control which is basically a TextBox that sits above a datagrid column header and displays the total number in the datagrid column. The control library consists of two custom-controls: DataGridColumnTotal contains the textbox, which also holds references to the DataGrid and ItemsSource. The other is called DataGridHeaderTotalControl, which is basically a style that targets the DataGridColumnHeader. This style places the DataGridColumnTotal control above the existing DatagridColumnHeader and binds the DataGrid and DataGridItemsSource fields from the DataGridColumnTotal control to the Datagrid and ItemsSource fields.
I'm currently just trying to get the TextBox to show if the IsTotalVisible dependency property is set, but it will not update when I try to set it in MainWindow.xaml. I don't have any code in place that displays the total value because I haven't gotten that far yet.
The problem occurs in MainWindow.xaml, when trying to set ctl:DataGridColumnTotal.IsTotalVisible="True" in the dataGridText column. The IsTotalVisible property is not getting set to true. But when I set the default value of the dependency property to true, the total textboxes will show.
DataGridColumnTotal.cs
////////////////////////////////////////////////////////////////////
//DataGridColumnTotal.cs
////////////////////////////////////////////////////////////////////
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Collections;
namespace RiskControlLibrary
{
public class DataGridColumnTotal : Control
{
static DataGridColumnTotal()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(DataGridColumnTotal), new FrameworkPropertyMetadata(typeof(DataGridColumnTotal)));
}
public static bool GetIsTotalVisible(
DependencyObject target)
{
return (bool)target.GetValue(IsTotalVisibleProperty);
}
public static void SetIsTotalVisible(
DependencyObject target, bool value)
{
target.SetValue(IsTotalVisibleProperty, value);
}
public static DependencyProperty IsTotalVisibleProperty =
DependencyProperty.RegisterAttached("IsTotalVisible", typeof(bool), typeof(DataGridColumnTotal),
new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.Inherits));
}
[ValueConversion(typeof(bool), typeof(Visibility))]
public class BoolToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if ((bool)value)
return Visibility.Visible;
else
return Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new Exception("Not Implemented.");
}
}
}
DataGridHeaderTotalControl.cs
////////////////////////////////////////////////////////////////////
//DataGridHeaderTotalControl.cs
////////////////////////////////////////////////////////////////////
using System.Windows;
using System.Windows.Controls;
namespace RiskControlLibrary
{
public class DataGridHeaderTotalControl : Control
{
static DataGridHeaderTotalControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(DataGridHeaderTotalControl), new FrameworkPropertyMetadata(typeof(DataGridHeaderTotalControl)));
}
}
}
Generic.xaml
////////////////////////////////////////////////////////////////////
//Generic.xaml
////////////////////////////////////////////////////////////////////
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:RiskControlLibrary"
xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
xmlns:s="clr-namespace:System;assembly=mscorlib">
<Style TargetType="{x:Type local:DataGridColumnTotal}">
<Style.Resources>
<local:BoolToVisibilityConverter x:Key="booleanToVisibilityConverter" />
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:DataGridColumnTotal}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox
x:Name="PART_TextBoxTotal"
IsReadOnly="True"
VerticalAlignment="Top"
VerticalContentAlignment="Center"
Text="{Binding Total,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:DataGridColumnTotal}}}"
Visibility="{Binding IsTotalVisible, RelativeSource={RelativeSource TemplatedParent},
Converter={StaticResource booleanToVisibilityConverter}}"
>
</TextBox>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type DataGridColumnHeader}"
x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:DataGridHeaderTotalControl},
ResourceId=DataGridHeaderTotalControlStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<local:DataGridColumnTotal Margin="1" Grid.Column="0" Grid.Row="0"/>
<theme:DataGridHeaderBorder Grid.Column="0" Grid.Row="1" SortDirection="{TemplateBinding SortDirection}"
IsHovered="{TemplateBinding IsMouseOver}"
IsPressed="{TemplateBinding IsPressed}"
IsClickable="{TemplateBinding CanUserSort}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding ="{TemplateBinding Padding}"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
SeparatorBrush="{TemplateBinding SeparatorBrush}">
<TextBlock Grid.Column="0" Grid.Row="1" Text="{TemplateBinding Content}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextWrapping="Wrap"></TextBlock>
</theme:DataGridHeaderBorder>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MainWindow.xaml
////////////////////////////////////////////////////////////////////
//MainWindow.xaml
////////////////////////////////////////////////////////////////////
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:app="clr-namespace:WpfApplication1"
xmlns:ctl="clr-namespace:RiskControlLibrary;assembly=RiskControlLibrary"
Title="MainWindow" Height="341" Width="452"
Loaded="Window_Loaded">
<Grid>
<DataGrid
Name="m_dgOrder"
ItemsSource="{Binding ListPos}"
GridLinesVisibility="None"
AutoGenerateColumns="False"
IsReadOnly="True"
Background="White"
CanUserResizeRows="False"
HeadersVisibility="Column"
RowHeaderWidth="0"
ColumnHeaderStyle="{StaticResource {ComponentResourceKey
TypeInTargetAssembly={x:Type ctl:DataGridHeaderTotalControl},
ResourceId=DataGridHeaderTotalControlStyle}}">
<DataGrid.Columns>
<DataGridTextColumn Header="Symbol" Binding="{Binding Path=Symbol}"/>
<DataGridTextColumn Header="Pos" Binding="{Binding Path=Pos}" ctl:DataGridColumnTotal.IsTotalVisible="True"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>

I was registering the IsTotalVisible property to the wrong class. Instead of DataGridColumnTotal it should've been DataGridTextColumn.

Changing source of an Image inside of a Button template

I have a button with an image defined in XAML like this:
<Button x:Name="buttonTest">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image x:Name="imageTest" Width="57" Height="81" Source="/Images/sample.png" />
</Border>
</ControlTemplate>
</Button.Template>
</Button>
How can I change the source of the image when the button is clicked?

I would probably do this with a toggle button instead of button since it has the IsChecked property that you can base the image switch on.
First you'll need some converter to go from true/false to the image path, may as well make it a generic one that you can use over and over, add this to your project and setup an xmlns to point to it in your xaml.
public class BooleanSwitchConverter : DependencyObject, IValueConverter
{
public object TrueValue
{
get { return (object)GetValue(TrueValueProperty); }
set { SetValue(TrueValueProperty, value); }
}
public static readonly DependencyProperty TrueValueProperty =
DependencyProperty.Register("TrueValue", typeof(object), typeof(BooleanSwitchConverter), new PropertyMetadata(null));
public object FalseValue
{
get { return (object)GetValue(FalseValueProperty); }
set { SetValue(FalseValueProperty, value); }
}
public static readonly DependencyProperty FalseValueProperty =
DependencyProperty.Register("FalseValue", typeof(object), typeof(BooleanSwitchConverter), new PropertyMetadata(null));
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return ((bool)value) ? TrueValue : FalseValue;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Then replace your Button with a toggle button like this using a Binding on IsChecked to pick the image.
<ToggleButton>
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border>
<Image>
<Image.Source>
<Binding Path="IsChecked" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<local:BooleanSwitchConverter
TrueValue="1.jpg"
FalseValue="2.jpg"/>
</Binding.Converter>
</Binding>
</Image.Source>
</Image>
</Border>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>

You can use a trigger like this (Used a rectangle for simplicity in the sample):
<Button x:Name="buttonTest" Width="200" Height="200">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Rectangle x:Name="Image" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Fill="Yellow"></Rectangle>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Image" Property="Fill" Value="Red"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

So I finally figured it out, user Gambi provided an answer in another thread.