Develop Reference

How to trim text displayed in a ComboBox?

I have my own combobox (autocompleteCombobox) where I would like to see only 35 characters of the selectedItem, but with a tooltip that show the full name.
The user control code:
<UserControl.Resources>
<Style x:Key="ComboboxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding ShownName}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<ComboBox x:Name="Combobox" IsSynchronizedWithCurrentItem="True"
IsEditable="True" TextSearch.Text="ShownName"
IsTextSearchEnabled="True" DisplayMemberPath="ShownName"
ToolTip="{Binding SelectedItem.ShownName,ElementName=autoComplete}"
ItemsSource="{Binding ItemsSource,ElementName=autoComplete}"
SelectedItem="{Binding SelectedItem, ElementName=autoComplete}"
Style="{StaticResource ComboboxStyle}">
<ComboBox.InputBindings>
<KeyBinding Key="Enter"
Command="{Binding Path=SelectItemCommand, ElementName=autoComplete}"
CommandParameter="ShownName"/>
</ComboBox.InputBindings>
</ComboBox>
</Grid>
And inside the cs file of the autocompletecombobox:
public static readonly DependencyProperty MaxTextLengthProperty =
DependencyProperty.Register(
"MaxTextLength",
typeof(int),
typeof(ComboBoxAutoComplete),
new UIPropertyMetadata(35));
public int MaxTextLength
{
get { return (int)GetValue(MaxTextLengthProperty); }
set
{
SetValue(MaxTextLengthProperty, value);
LimitTextInCombobox();
}
}
private void LimitTextInCombobox()
{
Combobox.Text = Combobox.Text.Substring(0, MaxTextLength);
}
But it doesn't work...

Rather than trimming the text to a certain number of characters you could let WPF trim it for you with respect to the visual width of the text, which probably would look better. If that is an option for you, you could look into the TextBlock.TextTrimming-property.

you can use converter
[ValueConversion(typeof(object), typeof(string))]
public class StringFormatConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
string str = value.ToString();
if (string.IsNullOrEmpty(str))
{
return "";
}
else
{
if (str.Length >= 35)
{
return str.Substring(0, 35);
}
else
{
return str;
}
}
}
public object ConvertBack(object value, Type targetType,
object parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
}
and in Xaml
<Windows.Resources>
<dict:StringFormatConverter x:Key="StringFormatConverter"/>
</Windows.Resources>
<UserControl.Resources>
<Style x:Key="ComboboxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding ShowName, Converter={StaticResource StringFormatConverter}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

The setter of a CLR wrapper for a dependency property should always only call the SetValue method to set the value of the dependency property. Nothing else:
public int MaxTextLength
{
get { return (int)GetValue(MaxTextLengthProperty); }
set
{
SetValue(MaxTextLengthProperty, value);
}
}
Also, you want to keep the original value to be able to display it in the tooltip anyway.
Using a converter as suggested by #Alematt seems like a good option. Just modify the ItemTemplate slightly:
<UserControl.Resources>
<local:Converter x:Key="converter" />
<Style x:Key="ComboboxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding ShownName, Converter={StaticResource converter}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
And create a converter class:
public class Converter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string shownName = value as string;
if (!string.IsNullOrEmpty(shownName) && shownName.Length > 35)
return shownName.Substring(0, 35) + "...";
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotSupportedException();
}
}
And keep the Tooltip as it is:
ToolTip="{Binding SelectedItem.ShownName, ElementName=autoComplete}"

Instead of that just pass the SelectedItem to your converter like so:
<ComboBox x:Name="cmb">
<ComboBox.Style>
<Style TargetType="ComboBox">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock>
<TextBlock.Text>
<MultiBinding Converter="{StaticResource multi}">
<Binding Path="."/>
<Binding Path="SelectedItem" ElementName="cmb"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.Style>
<ComboBox.Items>
<sys:String>Very long string 1</sys:String>
<sys:String>Very long string 2</sys:String>
</ComboBox.Items>
</ComboBox>
Then use your converter like so:
class MultiValConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
if (values[0] != null && values[1] != null)
{
if (values[0].ToString() == values[1].ToString())
{
return "...";//put your logic here i.e. substring(0,30);
}
}
return values[0];
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
and you would reference the converter like this:
<locals:MultiValConverter x:Key="multi"/>

Binding fails when using SolidColorBrush resource on Stroke property

I have created a UserControl and have quite a few bindings to several custom DependencyProperties in the control. For some reason though, one of these is failing with the error:
System.Windows.Data Error: 4 : Cannot find source for binding with
reference 'ElementName=YearSelectorControl'.
BindingExpression:Path=SelectedBorderColor; DataItem=null; target
element is 'SolidColorBrush' (HashCode=45568629); target property is
'Color' (type 'Color')
The control includes a ToggleButton and Popup. The error occurs when the Popup is opened by clicking on the ToggleButton.
Here is the xaml:
<UserControl x:Class="MyProject.Views.YearSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MyProject.Views"
mc:Ignorable="d"
d:DesignHeight="23" d:DesignWidth="181"
x:Name="YearSelectorControl">
<UserControl.Resources>
<SolidColorBrush x:Key="HoverColorBrush" Color="{Binding ElementName=YearSelectorControl, Path=HoverColor}"/> <!--This binding is virtually identical, but works fine-->
<SolidColorBrush x:Key="SelectedBorderColorBrush" Color="{Binding ElementName=YearSelectorControl, Path=SelectedBorderColor}"/> <!--This is the binding that fails-->
<local:YearToBackColorConverter x:Key="YearToBackColorConverter"/>
<local:YearToBorderThicknessConverter x:Key="YearToBorderThicknessConverter"/>
<Style x:Key="ForwardBackButtons" TargetType="{x:Type Button}" >
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontFamily" Value="Arial" />
</Style>
<ControlTemplate x:Key="YearButton" TargetType="{x:Type Button}">
<Grid Width="55" Height="30" Margin="2">
<Rectangle x:Name="ButtonRectangle" Stroke="{StaticResource SelectedBorderColorBrush}"> <!--Use of the failing brush-->
<!--Removed code that determines StrokeThickness. Works correctly if Stroke set to a specific color rather than a Static Resource-->
</Rectangle>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonRectangle" Property="Fill" Value="{StaticResource HoverColorBrush}"/> <!--Use of the properly binding brush-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Resources>
<Grid>
<!--Layout here-->
</Grid>
</UserControl>
Here is an excerpt from the code-behind for the two DependencyProperties that are bound to SolidColorBrush resources:
public Color HoverColor
{
get { return (Color)GetValue(HoverColorProperty); }
set { SetValue(HoverColorProperty, value); }
}
public static readonly DependencyProperty HoverColorProperty =
DependencyProperty.Register("HoverColor", typeof(Color), typeof(YearSelector), new PropertyMetadata(Color.FromArgb(255,190,230,253)));
public Color SelectedBorderColor
{
get { return (Color)GetValue(SelectedBorderColorProperty); }
set { SetValue(SelectedBorderColorProperty, value); }
}
public static readonly DependencyProperty SelectedBorderColorProperty =
DependencyProperty.Register("SelectedBorderColor", typeof(Color), typeof(YearSelector), new PropertyMetadata(Color.FromArgb(255,126,0,234)));

I went away from this for a few months to focus on more important elements of my application and have finally come back to it. I discovered the solution, though I'm not sure why it was a problem in the first place.
For whatever reason, binding a SolidColorBrush resource to the Stroke property doesn't work. What I did instead, is I bound the Color DependencyProperty directly to Stroke and used an IValueConverter to convert it to a SolidColorBrush.
XAML:
<Rectangle x:Name="ButtonRectangle" Stroke="{Binding ElementName=YearSelectorControl, Path=SelectedBorderColor, Converter={StaticResource ColorToSolidColorBrushConverter}}">
Code-behind:
public class ColorToSolidColorBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
try
{
Color c = (Color)value;
return new SolidColorBrush(c);
}
catch
{
return new SolidColorBrush(Color.FromRgb(0,0,0));
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}

WPF TemplateBinding Concatenate String for Value

I want to add a Custom Property (via a Dependency Property) to my custom ToggleButton Template.
Now i want to have the value of the containing Label (as a placeholder for future implementation) to be a concatenated value of, say "Hello " and the actual Property Value.
Without the concatenation it works fine (displaying "Warrior" on the Label)
But when i try to set the label as a concatenation the xaml doesnt compile anymore.
<Label Content="Hello {TemplateBinding local:HeroClassCheckbox.HeroClass}"/>
How can i achieve this?
The Rest of the Code:
My .xaml
<Window.Resources>
<ResourceDictionary>
<Style x:Key="HeroClassCheckbox" TargetType="ToggleButton">
<Setter Property="Content" Value="Green" />
<Setter Property="local:HeroClassCheckbox.HeroClass" Value="NoClass"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Label Content="{TemplateBinding local:HeroClassCheckbox.HeroClass}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<ToggleButton Width="150" Height="50" local:HeroClassCheckbox.HeroClass="Warrior" Style="{DynamicResource HeroClassCheckbox}"/>
</Grid>
My .xaml.cs
public static class HeroClassCheckbox
{
public static readonly DependencyProperty HeroClassProperty = DependencyProperty.RegisterAttached("HeroClass",
typeof(string), typeof(HeroClassCheckbox), new FrameworkPropertyMetadata(null));
public static string GetHeroClass(UIElement element)
{
if (element == null)
throw new ArgumentNullException("element");
return (string)element.GetValue(HeroClassProperty);
}
public static void SetHeroClass(UIElement element, string value)
{
if (element == null)
throw new ArgumentNullException("element");
element.SetValue(HeroClassProperty, value);
}
}

You should use a converter as an approach to your goal. Here is an example..
public class HelloLabelConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
char[] removeThis = "Hello ".ToCharArray();
return value.ToString().TrimStart(removeThis);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return string.Format("Hello {0}", value);
}
}
<Window.Resources>
<local:HelloLabelConverter x:Key="HelloLabelConverter" />
</Window.Resources>
<Grid>
<Label Content="{Binding ElementName= lblPropertyToBind, Path=Text, Converter={StaticResource HelloLabelConverter}}"></Label>
</Grid>

Data trigger not firing off correct string value

So here's the idea.
If the textbox is empty, 'DataTrigger' should set the outline (BorderBrush) to red.
If the textbox is not empty / has text; then the dataTrigger should set the BorderBrush to Blue.
xmlns:conv="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<!-- conv is referenced in the "clr-namespace:WpfApplication1" namespace. It's bassically a referal to a converter I'm using -->
<conv:IsNullConverter x:Key="isNullConverter"/>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<!-- if the textbox is empty, then the setter should set the border colour to red-->
<DataTrigger Binding="{Binding Words, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource isNullConverter}}" Value="True">
<Setter Property="BorderBrush" Value="Red"/>
</DataTrigger>
<!-- If it has text inside it, setter should set the border colour to blue -->
<DataTrigger Binding="{Binding Words, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource isNullConverter}}" Value="False">
<Setter Property="BorderBrush" Value="Blue"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<TextBox x:Name="first" FontSize="14" TabIndex="1" Background="Black" BorderThickness="5" Foreground="White" Margin="29,10,132,272" />
</Grid>
Because it's not possible for datatriggers to see if a value is NOT null indipendently, I had to add some code to help it do that.
using System.Windows.Data;
using System.Globalization;
using System.ComponentModel;
namespace WpfApplication1
{
public class IsNullConverter : IValueConverter, INotifyPropertyChanged
{
// The string that the 'conv:' checks against
private string FOO;
// The DataTriggrer is bound to 'Words'
public string Words
{
get
{
return FOO;
}
set
{
if (FOO != value)
{
FOO = value;
RaisePropertyChanged("Words");
}
}
}
private void RaisePropertyChanged(string prop)
{
if (PropertyChanged == null)
{
PropertyChanged(this, new PropertyChangedEventArgs(prop));
}
}
public event PropertyChangedEventHandler PropertyChanged;
public string Error
{
get { return null; }
}
// This is the 'Convert' Parameter conv checks against. Here is the problem is
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
//This checks against the FOO string at the top of this class. Not the FOO in 'Words' get & set string
if (FOO == null)
{
value = true;
}
// So even if 'Words' raises the property changed, The origional FOO string remains unaffected.
// So the Datatrigger is never fired
if (FOO != null)
{
value = false;
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new InvalidOperationException("IsNullConverter can only be used OneWay.");
}
}
}
The thing is if I append the string FOO like;
private string FOO = "Something";
The Datatrigger fires at runtime and changes the outline colour to blue.
But I need the colour to be based on the textbox content rather than what I directly declare the string as.
I tried binding the data Trigger to the 'Words' string but the outline colour remains red, empty or not.
And suggestions? I really don't mind if I have to completely throw this code upside down if there's a better way of doing it.

Here you go:
<TextBox x:Name="first" FontSize="14" TabIndex="1" Background="Black" BorderThickness="5" Foreground="White" Margin="29,10,132,272">
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="BorderBrush" Value="Blue"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource Self}}" Value="">
<Setter Property="BorderBrush" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource Self}}" Value="{x:Null}">
<Setter Property="BorderBrush" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>

Bind to the TextBox.Text property by using RelativeSource:
<DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource isNullConverter}}" Value="True">
<!--apropriate setter-->
</DataTrigger>
This trigger sets the BorderBrush if Text is empty. To set the border brush when Text is not empty, just use normal Setter, without DataTrigger.
Also, note that within your ValueConverter you should use String.IsNullOrEmpty instead of plain NULL comparison.

You can simplify your converter to look something like
public class IsNullConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return String.IsNullOrEmpty((string) value);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new InvalidOperationException("IsNullConverter can only be used OneWay.");
}
}
and then in style bind TextBox.Text via converter
<Window.Resources>
<conv:IsNullConverter x:Key="isNullConverter"/>
<Style TargetType="{x:Type TextBox}">
<Setter Property="BorderBrush" Value="Blue"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource isNullConverter}}" Value="True">
<Setter Property="BorderBrush" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
this will work but only if TextBox is not focused as then default template will take over and change BorderBrush. You can make it work but then you'll need to change default template as well where simpliest template would be another Setter in your Style
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>

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.