We Keep Coding

How can I add something to my custom listbox?

I made a custom listbox but when I push the button show every language nothing is showing. How can I fix this. When I delete the listbox style it just works fine. It's all in C#.
I hope you can help me.
greetings
Elias
<ListBox x:Name="lsbResultaatTaal"
Foreground="Black"
FontSize="15"
Grid.Row="1"
Margin="528,56,0,0"
Height="450"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Width="233">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{d:SampleData ItemCount=5}"/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Style>
<Style TargetType="ListBox">
<Setter Property="Background" Value="Gray"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Style>
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<Border Width="230" Height="450"
CornerRadius="9"
BorderThickness="1"
BorderBrush="Black"
Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</ListBox.Template>
</ListBox>

You can set style in resources
<Window.Resources>
<Style TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="Gray" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray" />
<!--
Why you choose same background color when hover listbox
Maybe same color your background and foreground
-->
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
OR
Can you try below changes:
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{Binding YourProp}" />

How to show a value which is not bound by the CategoryPath or ValuePath inside the Telerik's RadCartesianChart's Tooltip?

I'm working with a telerik RadCartesianChart. And I'm supposed to show a tooltip which conveys the information about the series inide the chart (such as the date, the value, the title of the series). I was able to show the date and value which were already bound in the CategoryPath and the ValuePath of the chart respectively. But I have no clue how to show the title of the series which belongs to the same data source but not bound by either the CategoryPath or the ValuePath.
Below is what I have done so far.
<telerik:RadCartesianChart x:Name="chart" Margin="0,10,0,36" Width="auto" Grid.RowSpan="2">
<telerik:RadCartesianChart.Behaviors>
<telerik:ChartTooltipBehavior HorizontalOffset="-11" VerticalOffset="-50" />
</telerik:RadCartesianChart.Behaviors>
<telerik:RadCartesianChart.TooltipTemplate>
<DataTemplate>
<Grid>
<Border Background="White" BorderBrush="Black" BorderThickness="1" Padding="5" CornerRadius="3">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Category}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Value, StringFormat=\{0:N2\}}" />
</StackPanel>
</StackPanel>
</Border>
</Grid>
</DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:DateTimeCategoricalAxis
x:Name="datetimeAxis"
LabelFitMode="MultiLine"
LabelFormat="{Binding Tab.CurrentPoC.LabelFormat}"
LabelInterval="1"
LabelOffset="0"
LabelRotationAngle="270"
LabelStyle="{DynamicResource LabelStyle}"
LastLabelVisibility="Visible"
LineDashArray="1 1"
LineStroke="{DynamicResource CouleurTexte}"
LineThickness="1"
MajorTickInterval="1"
MajorTickLength="1"
PlotMode="OnTicks"
SmartLabelsMode="SmartStep"
TickThickness="5"
ZIndex="0" Height="5" />
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Foreground="White" LastLabelVisibility="Visible" HorizontalLocation="Right"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y" />
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.Resources>
<Style x:Key="AxisLineStyle" TargetType="{x:Type telerik:LinearAxis}" >
<Setter Property="Foreground" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
<Setter Property="Background" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
</Style>
<DataTemplate x:Key="ellipseTemplate">
<Ellipse Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}"/>
</DataTemplate>
<DataTemplate x:Key="rectangleTemplate">
<Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>
<DataTemplate x:Key="triangleTemplate">
<Polygon Points="10,5 5,10 15,10 10,3" Stroke="GreenYellow" StrokeThickness="2" Fill="{Binding Converter={StaticResource PaletteConverter}}"/>
</DataTemplate>
<!--<DataTemplate x:Key="+Template">
<Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>
<DataTemplate x:Key="xTemplate">
<Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>-->
<Style TargetType="telerik:LineSeries" BasedOn="{StaticResource LineSeriesStyle}">
<Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
<Setter Property="ShowLabels" Value="False"/>
<Setter Property="Stroke" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
<Setter Property="VerticalAxis">
<Setter.Value>
<telerik:LinearAxis ElementBrush="{Binding Tab.CurrentPoC.LineSeriesColor}" HorizontalLocation="Left"/>
</Setter.Value>
</Setter>
<Setter Property="PointTemplateSelector" Value="{StaticResource templateSelector}"/>
</Style>
<Style TargetType="telerik:BarSeries" BasedOn="{StaticResource BarSeriesStyle}">
<Setter Property="CombineMode" Value="Stack"/>
<Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
<Setter Property="ShowLabels" Value="False"/>
<Setter Property="VerticalAxis">
<Setter.Value>
<telerik:LinearAxis ElementBrush="Gray" HorizontalLocation="Right"/>
</Setter.Value>
</Setter>
<Setter Property="PointTemplate">
<Setter.Value>
<DataTemplate>
<Rectangle Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="telerik:PointSeries" BasedOn="{StaticResource PointSeriesStyle}">
<Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
<Setter Property="ShowLabels" Value="False"/>
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15"/>
<Setter Property="VerticalAxis">
<Setter.Value>
<telerik:LinearAxis ElementBrush="{Binding Tab.CurrentPoC.PointSeriesColor}" HorizontalLocation="Left" />
<!--Style="{DynamicResource AxisLineStyle}"-->
</Setter.Value>
</Setter>
<Setter Property="PointTemplateSelector" Value="{StaticResource templateSelector}"/>
</Style>
</telerik:RadCartesianChart.Resources>
<telerik:RadCartesianChart.SeriesProvider>
<telerik:ChartSeriesProvider Source="{Binding Tab.CurrentPoC.GraphsToDisplay, Mode=TwoWay}">
<telerik:ChartSeriesProvider.SeriesDescriptors>
<telerik:CategoricalSeriesDescriptor x:Name="CatSeries" CategoryPath="TimeStampX" ValuePath="ValueY" ItemsSourcePath="Data" TypePath="SerieType"/>
</telerik:ChartSeriesProvider.SeriesDescriptors>
</telerik:ChartSeriesProvider>
</telerik:RadCartesianChart.SeriesProvider>
</telerik:RadCartesianChart>

To achieve your requirement, you can use the Presenter property of the DataPoint object.
The DataPoint object is the data context passed to the TooltipTemplate.
The Presenter is a property of DataPoint which holds a reference to the series object that hosts the concrete data point.
<telerik:RadCartesianChart.TooltipTemplate>
<DataTemplate>
<TextBlock Text="{Binding Presenter.DataContext.MySeriesNameProperty}" />
</DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>
You can read a bit more about the DataPoint class in the RadChartView documentation.

I got it working by adding a new property called LegendName to the data source object. And changed the binding path like this <TextBlock Text="{Binding Path=DataItem.LegendName}"/>. Not sure whether this is the proper way but it's working as intended.

How do I change a controls background on my UserControl when the item is selected

So I have this ListView which has a DataTemplate of my UserContol because I wanted a custom design for my ListView and it looks like this
<ListView x:Name="LeftMenuListView"
ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem}"
BorderThickness="0"
Width="255">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<local:MenuItemControl/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Super simple, now when an Item is selected the entire thing changes color
which I want it looks great imo
<Style TargetType="ListViewItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
Name="Border"
BorderThickness="0">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background"
Value="#444444"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But there is a border inside my usercontrol thats 10px wide with the name SmallBorder.
I want to change the color of that to green when the item is selected but I have no idea how to access that property
My UserControl
<Grid Background="Transparent">
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center"
Margin="20,0,0,0"
Foreground="#9e9e9e"
FontFamily="Tahoma"/>
<Border Width="10"
HorizontalAlignment="Left"
x:Name="SmallBorder"/>
</Grid>
So how do I change the color of SmallBorder when an item is selected and then when it's not selected it turns transparent?

The ViewModel, which is the DataContext of you usercontrol, should expose a property like IsSelected, then you can add an style with a DataTrigger that reacts to a change in this property.
EDIT:
Declare an style for the border itself an access it as an StaticResource:
It could be placed in a ResourceDictionary, within YourUserControl.Resources or inline with the Border control declaration:
<Style TargetType={x:Type Border} x:Key=SelectedBorderStyle>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="BorderBrush" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
And then your UserControl would be:
<Grid Background="Transparent">
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center"
Margin="20,0,0,0"
Foreground="#9e9e9e"
FontFamily="Tahoma"/>
<Border Width="10"
Style={StaticResource SelectedBorderStyle}
HorizontalAlignment="Left"/>
</Grid>
Note that now you don't need to set the name for the Border.

A Border is invisible unless there is something in it, but you could replace the Border with a Grid and use a Style with a DataTrigger that binds to the IsSelected property:
<Grid Background="Transparent">
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center"
Margin="20,0,0,0"
Foreground="#9e9e9e"
FontFamily="Tahoma"/>
<Grid Width="10"
HorizontalAlignment="Left"
x:Name="SmallBorder">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</Grid>

Unable to resize StackPanel when IDataErrorInfo is triggered

When a TextBox element has an error The custom adorner doesn't resize the StackPanel the Textbox control lies in:
Using DockPanel.Bottom causes the adorner to overlap on the Textbox below.
The code I shamelessly lifted off http://hirenkhirsaria.blogspot.ie/2013/05/wpf-input-validation-using-mvvm.html:
<ControlTemplate.Resources>
<Style x:Key="textblockErrorTooltip" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="10 0 10 0" />
</Style>
</ControlTemplate.Resources>
<DockPanel LastChildFill="true">
<Border Height="Auto" Margin="5,0,0,0" Background="#DC000C" CornerRadius="3" DockPanel.Dock="Right">
<TextBlock Style="{StaticResource textblockErrorTooltip}" Text="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />
</Border>
<AdornedElementPlaceholder Name="customAdorner">
<Border BorderBrush="#DC000C" BorderThickness="1.3" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
Sure, I could use Z Index but I don't like it.
Is there a way to cause the StackPanel to resize on error?
I was thinking of adding a ContentTemplate after each Textbox control:
<StackPanel>
<TextBox/>
<ContentTemplate/>
</StackPanel>
<StackPanel>
<TextBox/>
<ContentTemplate/>
</StackPanel>
The ContentTemplate generates an error info DataTemplate which I believe should cause the StackPanel to resize.
But I can't figure out how the binding to (Validation.Errors)[0].ErrorContent} should be done.
My terrible attempt:
<UserControl.Resources>
<DataTemplate x:Key="errorinfo">
<TextBlock>Hello World</TextBlock>
</DataTemplate>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" Grid.Row="4">
<Label Padding="0,0,20,0">Name:</Label>
<StackPanel>
<TextBox Padding="0,0,10,0" Width="150" x:Name="name" Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"></TextBox>
</StackPanel>
<ContentControl >
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="ContentTemplate" Value="{x:Null}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=name, Path=(Validation.HasError)}" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding ElementName=name, Path=(Validation.Errors)[0].ErrorContent}"> </TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</StackPanel>
I can't reuse the datatemplate though!
My question is similar to: WPF- Validation -The validation error message goes behind the other controls because of AdornerDecorator
I just want a different solution.
Any ideas? Thanks

Adorner layers sit separate from the main rendering layers in WPF. A good way to think of an Adorner is simply as a graphical overlay layer which encompasses the shape of the Control it's element tags surround (similar to the behaviour of a Border for example).
You don't need a separate AdornerDecorator for every Control. This means the ideal solution would be to add the AdornerDecorator at the highest level possible such as your Window so that you are always guaranteed an Adorner scope.

I can't believe it! Figured it out myself :D
<UserControl.Resources>
<Style x:Key="textblockErrorTooltip" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="10 0 10 0" />
</Style>
<DataTemplate x:Key="errortemplate">
<Border Height="Auto" Margin="5,0,0,0" Background="#DC000C" CornerRadius="3" DockPanel.Dock="Right">
<TextBlock Style="{StaticResource textblockErrorTooltip}" Text="{Binding Path=(Validation.Errors)[0].ErrorContent}"></TextBlock>
</Border>
</DataTemplate>
<Style x:Key="ContentControlErrorTemplate" TargetType="ContentControl">
<Setter Property="ContentTemplate" Value="{x:Null}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=StackPanel}, Path=Children[1].(Validation.HasError)}" Value="True">
<Setter Property="ContentTemplate" >
<Setter.Value>
<DataTemplate>
<Border Height="Auto" Margin="5,0,0,0" Background="#DC000C" CornerRadius="3" DockPanel.Dock="Right">
<TextBlock Style="{StaticResource textblockErrorTooltip}" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=StackPanel}, Path=Children[1].(Validation.Errors)[0].ErrorContent}"></TextBlock>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" Grid.Row="4">
<Label Padding="0,0,20,0">Name:</Label>
<TextBox Padding="0,0,10,0" Width="150" x:Name="name" Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"></TextBox>
<ContentControl Style="{StaticResource ContentControlErrorTemplate}">
</ContentControl>
</StackPanel>
If you have ideas to improve it please let me know. I'm not sure how efficient it is but it works.

WPF TabItem - Image Binding

Issue
I am trying to bind an Image from my TabItem to my TabControlResource section but I cannot seem to do this. The Header text is fine as the TabItem has a Header attribute but there is nothing I can add my image to.
Code
Here is the whole of my TabControl code:
<TabControl Margin="10" BorderBrush="#c83620" BorderThickness="4" Background="#e37e6e" FontFamily="Segoe UI" FontSize="14" >
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
<StackPanel Orientation="Horizontal" Margin="6,4,6,4">
<Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
<Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="#e37e6e" />
<Setter TargetName="Text" Property="TextBlock.Foreground" Value="White"/>
<Setter TargetName="Text" Property="TextBlock.FontWeight" Value="Bold"/>
<Setter TargetName="Border" Property="Margin" Value="1,1,1,-4"/>
<Setter TargetName="Border" Property="Padding" Value="2"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Text" Property="TextBlock.Foreground" Value="#c83620"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Margin="-3,0,0,0" Header="Login">
</TabItem>
<TabItem Header="General" >
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Security" />
<TabItem Header="Details" />
</TabControl>
As you can see from the section below I am binding the content of the label to the header of the TabItem and it works fine:
<Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
<StackPanel Orientation="Horizontal" Margin="6,4,6,4">
<Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
<Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
</StackPanel>
</Border>
But I want different images for each of the TabItems. Where can i bind the Image to on the TabItem to get the correct image?

You can do that by using other properties of the Template, for example Tag property. So the image binding should look like this.
<Image Name="img" Height="15" Width="15" Margin="0,0,4,0"
Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag.Source}" />
And you should define in the resources all images like that.
<Image x:Key="testImage" Source="/WPFTest;component/Images/Reload.png" />
And bind it to the Tag property of TabItem.
<TabItem Header="General" Tag="{StaticResource testImage}" >