How to set a converter in a style but not the path? - wpf

I'm trying to create a style for a textbox which I want to be able to use throughout my code. My style defines a converter in the binding of the Text property but does not set its path because my bound data may not be named the same wherever I use this style.
<Style x:Key="CustomTextBox" BasedOn="{StaticResource {x:Type TextBox}}"
TargetType="{x:Type TextBox}">
<Setter Property="Text">
<Setter.Value>
<Binding>
<Binding.Converter>
<CustomTextBoxConverter/>
</Binding.Converter>
</Binding>
</Setter.Value>
</Setter>
</Style>
And then the customTextBox would be use like so :
<TextBox Height="28" Name="txtRate" Style="{StaticResource CustomTextBox}"
MaxLength="5" Text="{Binding Path=BoundData}"/>
When I write the code above, I get an execption that "Two-way binding requires Path or XPath.".
I even tried to create an attached properties that is used in the style binding to reflect this value in the style but I couldn't get working either. See next :
<Converters:SomeConvertingFunction x:Key="CustomTextConverter"/>
<local:CustomAttachedProperties.ReflectedPath x:Key="ReflectedPath"/>
<Style x:Key="CustomTextBox" BasedOn="{StaticResource {x:Type TextBox}}"
TargetType="{x:Type TextBox}">
<Setter Property="Text">
<Setter.Value>
<Binding Path=ReflectedPath Converter=CustomTextConverter/>
</Setter.Value>
</Setter>
</Style>
Used in a page like so :
<TextBox Height="28" Name="txtRate" Style="{StaticResource CustomTextBox}"
MaxLength="5" CustomAttachedProperty="contextBoundDataAsString"/>
The code for the attached property is :
Public Class CustomAttachedProperties
Public Shared ReadOnly ReflectedPathProperty As DependencyProperty =
DependencyProperty.RegisterAttached("ReflectedPath", GetType(String),
GetType(CustomAttachedProperties))
Public Shared Sub SetReflectedPath(element As UIElement, value As String)
element.SetValue(ReflectedPathProperty, value)
End Sub
Public Shared Function GetReflectedPath(element As UIElement) As String
Return TryCast(element.GetValue(ReflectedPathProperty), String)
End Function
End Class
When I try to using the above code it compiles fine but it does not seem to do anything on my XAML, like it might be creating different instances of the CustomAttachedProperty.
Sorry for the lenghty question but I thought it should be easy to create custom controls that have their own default converters with WPF... I'm confused!

You can create a UserControl that does this quite simply:
<UserControl x:Class="namespace.MyCustomConverterTextBox">
<TextBlock Text="{Binding Text, Converter={StaticResource yourconverter}}"/>
</UserControl>
Then declare Text as a DependencyProperty in code-behind:
public partial class MyCustomConverterTextBox : UserControl
{
public string Text {
get{return (string) GetValue(TextProperty);}
set{SetValue(TextProperty, value);}
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(MyCustomConverterBox));
}
This should be enough to let you use it in your xaml:
<local:MyCustomConverterTextBox Text="{Binding YourBinding}" />
I didn't run this code so there might be typos, but it should be enough to give you an idea how to go about this.

The best way to do this in my opinion, is to create a new class that inherits from TextBox, then override the PropertyMetadata for the Text property, allowing yourself an opportunity to change the value in a Coerce callback.

Related

How to change font color of items in listbox (wpf)

I have a listbox which is bounded to an observable collection. The elements in the collection contain a variable called color. My listbox's items are already bounded to the collection, but how do I also bind the items font color to that? I already have a data template which works fine replacing item's name with the color name like this
<DataTemplate x:Key="myListBox">
<TextBlock Padding="0,0,10,0"
Text="{Binding Path=Color, Mode=Default}"/>
</DataTemplate>
but I can't seem to find which property I have to set in order to bind the color.
Not sure which colour you're referring to, but this will set the background and text/foreground colours.
<TextBlock Padding="0,0,10,0"
Text="{Binding Path=Color, Mode=Default}"
Background="{Binding myBackgroundColour}"
Foreground="{Binding myTextColour}"
/>
EDIT: dependancy prop -
public string Color
{
get { return (string)GetValue(ColorProperty); }
set { SetValue(ColorProperty, value); }
}
// Using a DependencyProperty as the backing store for Color. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ColorProperty =
DependencyProperty.Register("Color", typeof(string), typeof(CLASSNAMEHERE), new UIPropertyMetadata("Black"));
Replace CLASSNAMEHERE with the name to the class you're putting it in, ie the viewmodel class or codebehind class name.
use:
this.Color = "Yellow";
you can use this resource style
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Foreground" Value="></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
bla bla bla
</Style>

Attached behavior binding to element in controltemplate

I am adding an attached behaviour to a slider which will cause it to scroll some content when the thumb is dragged and held over a specific region. (Can't use a straightforward IsMouseOver trigger as the Slider Thumb has MouseCapture.)
The behaviour has 3 properties:
#region IsScrollHoverProperty
public static readonly DependencyProperty IsScrollHoverProperty = DependencyProperty.RegisterAttached(
"IsScrollHover",
typeof(Boolean),
typeof(ScrollHoverAreaBehaviour),
new UIPropertyMetadata(false));
#endregion
#region ScrollLeftRectProperty
public static readonly DependencyProperty ScrollLeftRectProperty = DependencyProperty.RegisterAttached(
"ScrollLeftRect",
typeof(Rectangle),
typeof(ScrollHoverAreaBehaviour),
new UIPropertyMetadata(null));
#endregion
#region ScrollRightRectProperty
public static readonly DependencyProperty ScrollRightRectProperty = DependencyProperty.RegisterAttached(
"ScrollRightRect",
typeof(Rectangle),
typeof(ScrollHoverAreaBehaviour),
new UIPropertyMetadata(null));
#endregion
The IsScrollHoverProperty is being set to true when the user drags the slider, this is all done in the Slider's ControlTemplates.Triggers, and works correctly.
When it's set to true the callback is going to hook PreviewMouseEnterHandlers into the two Rectangles to detect when the mouse enters them.
The Rectangles in question are also defined in the Slider's controltemplate thusly:
<StackPanel Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left" Orientation="Horizontal">
<Rectangle Width="40" Fill="#AAAAAAAA" Name="ScrollLeftRect"/>
</StackPanel>
<StackPanel Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Right" Orientation="Horizontal">
<Rectangle Width="40" Fill="#AAAAAAAA" Name="ScrollRightRect"/>
</StackPanel>
The problem I have is binding these Rectangles to the attached ScrollRightRect and ScrollLeftRect Properties. I have tried a few things and suspect I have made a stupid binding error or am trying to do something not allowed. I am currently binding them in the controltemplate.triggers as follows:
<Trigger Property="local:ScrollHoverAreaBehaviour.IsScrollHover" Value="False">
<Setter Property="local:ScrollHoverAreaBehaviour.ScrollLeftRect" Value="{Binding ElementName=ScrollLeftRect}"/>
<Setter Property="local:ScrollHoverAreaBehaviour.ScrollRightRect" Value="{Binding ElementName=ScrollRightRect}"/>
<Setter TargetName="ScrollLeftRect" Property="Fill" Value="Red"/>
<Setter TargetName="ScrollRightRect" Property="Fill" Value="Red"/>
</Trigger>
I know this Trigger is being tripped as the rectangles fill Red as expected.
Can anyone spot what I'm doing wrong from these snippets?
Thanks in advance.
Rob
First, let's confirm you're not doing anything wrong, and the problem has nothing to do with the attached behaviors.
<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="Yellow">
<StackPanel>
<TextBlock x:Name="theText" Text="Hello" />
<ContentPresenter />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content" Value="{Binding ElementName=theText, Path=Text}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
This snippet should cause "Hello" to appear twice when I mouse over the button, but it doesn't, and I get the same error as you:
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=theText'. BindingExpression:Path=Text; DataItem=null; target element is 'Button' (Name=''); target property is 'Content' (type 'Object')
This is explainable - once the binding is set on the Button, it won't be able to find a control named 'theText', because the Button lives in a different NameScope.
An alternative
Some WPF controls need to do something similar to you - they assume that a specific control exists in the tree that they will interact with. But they don't use properties - they use names.
Start by giving the controls a name - the convention is to use "PART_" prefix:
<Rectangle ... Name="PART_ScrollLeftRect" />
Now put code like this in your callback when IsScrollHover is set:
private static void IsScrollHoverSetCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var target = (Slider) d;
if ((bool)e.NewValue == false)
return;
target.ApplyTemplate();
var leftRectangle = target.Template.FindName("PART_ScrollLeftRect", target);
var rightRectangle = target.Template.FindName("PART_ScrollRightRect", target);
// Do things with the rectangles
}
Note that depending on when the IsScrollHost property is set, the template might not be ready yet. In that case, you might want to subscribe to the Loaded or similar event, and then call ApplyTemplate().
Although it might seem more complicated, it has one nice benefit: the markup will be simpler. A designer using Blend won't have to remember to wire up those complicated triggers, they just have to name the controls correctly.
The use of the PART_ prefix is a WPF convention, and normally used along with the TemplatePart attribute. An example of this is the TextBox. When you override the template of a TextBox, it won't function until you add a control named PART_ContentHost.
Update: I just blogged about template parts here: http://www.paulstovell.com/wpf-part-names

Making the style's binding more flexible

I'm trying to make the existing style more flexible.
I'm attaching a dep. property to the double click event of the data grid row control.
On double-clicking the row i want a certain window to open.
To achieve this I've implemented a dep. property and added a style definition.
Below is the part from the view file:
<Style x:Key="SomeKey" TargetType={x:Type DataGridRow} BasedOn= "SomeOtherKey">
<Setter Property="vm:DataGridBehavior:OnDoubleClick" Value="{Binding Path=CommandName,
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}">
</Setter>
</Style>
the attached property hooks to the double-click event on the data row
and executes the relay command bound to the view.
I'd like to enable more flexibility in the style
by specifying the command-to-be-invoked name in the view itself (as it may differ between different views).
How can I achieve that?
Is there any template definition that I'm missing?
Any help would be greatly appreciated :)
You could subclass DataGrid and add a Property for the Command, e.g MyCommand. Then you could bind that ICommand in each DataGrid and use MyCommand as Path in the RowStyle Binding
DataGrids
<local:CommandDataGrid RowStyle="{StaticResource SomeKey}"
MyCommand="{Binding CommandName1}">
<!-- ... -->
<local:CommandDataGrid RowStyle="{StaticResource SomeKey}"
MyCommand="{Binding CommandName2}">
RowStyle
<Style x:Key="SomeKey" TargetType="{x:Type DataGridRow}">
<Setter Property="vm:DataGridBehavior.OnDoubleClick"
Value="{Binding Path=MyCommand,
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
</Style>
CommandDataGrid
public class CommandDataGrid : DataGrid
{
public static readonly DependencyProperty MyCommandProperty =
DependencyProperty.Register("MyCommand",
typeof(ICommand),
typeof(CommandDataGrid),
new UIPropertyMetadata(null));
public ICommand MyCommand
{
get { return (ICommand)GetValue(MyCommandProperty); }
set { SetValue(MyCommandProperty, value); }
}
}
Alternatively, you could create an attached property e.g MyCommand that you use
DataGrid
<DataGrid vm:DataGridBehavior.MyCommand="{Binding CommandName}"
RowStyle
<Style x:Key="SomeKey" TargetType="{x:Type DataGridRow}">
<Setter Property="vm:DataGridBehavior.OnDoubleClick"
Value="{Binding Path=(vm:DataGridBehavior.MyCommand),
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
</Style>
MyCommandProperty
public static readonly DependencyProperty MyCommandProperty =
DependencyProperty.RegisterAttached("MyCommand",
typeof(ICommand),
typeof(DataGridBehavior),
new UIPropertyMetadata(null));
public static void SetMyCommand(DependencyObject element, ICommand value)
{
element.SetValue(MyCommandProperty, value);
}
public static ICommand GetMyCommand(DependencyObject element)
{
return (ICommand)element.GetValue(MyCommandProperty);
}

Control's parent is null when placed inside a ContentControl

I've got a simple control derived from ContentControl with 3 properties.
My problem comes when I try to perform a control.TransformToVisual() with a control that is placed inside MainContent. It always brings up an ArgumentNullException.
My guess is this due to the control having a null Parent property. Is there a simple way to way around this?
C#
public static readonly DependencyProperty LabelTextProperty =
DependencyProperty.Register("LabelText", typeof(string), typeof(LabelledControl), null);
public static readonly DependencyProperty ValidationContentProperty =
DependencyProperty.Register("ValidationContent", typeof(object), typeof(LabelledControl), null);
public static readonly DependencyProperty MainContentProperty =
DependencyProperty.Register("MainContent", typeof(object), typeof(LabelledControl), null);
XAML
<Style TargetType="local:LabelledControl">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:LabelledControl">
<StackPanel Margin="0 10 0 0">
<StackPanel Orientation="Vertical">
<dataInput:Label Content="{TemplateBinding LabelText}" FontWeight="Bold" FontSize="12" IsTabStop="False"/>
<ContentControl Content="{TemplateBinding ValidationContent}" IsTabStop="False"/>
</StackPanel>
<ContentControl x:Name="_contentControl" Content="{TemplateBinding MainContent}" IsTabStop="False"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Have you tried using the ContentPresenter class instead of the ContentControl class within your ControlTemplate to present those properties within the template? I am not sure if it is related to your ArgumentNullException, but typically the content of a ContentControl is exposed on the template via a ContentPresenter.
Since your control derives from ContentControl the ContentPresenter will automatically bind the Content and ContentTemplate properties for you to whatever the Content property is set to. You could also manually bind the Content property of the ContentPresenter to your ValidationContent property.
I am not sure why you are defining a MainContent property when the base ContentControl already gives you a Content property to use, maybe that is a second piece of content you are trying to expose.

Issue binding Image Source dependency property

I have created a custom control for ImageButton as
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Local:ImageButton}">
<StackPanel Height="Auto" Orientation="Horizontal">
<Image Margin="0,0,3,0" Source="{Binding ImageSource}" />
<TextBlock Text="{TemplateBinding Content}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ImageButton class looks like
public class ImageButton : Button
{
public ImageButton() : base() { }
public ImageSource ImageSource
{
get { return base.GetValue(ImageSourceProperty) as ImageSource; }
set { base.SetValue(ImageSourceProperty, value); }
}
public static readonly DependencyProperty ImageSourceProperty =
DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton));
}
However I'm not able to bind the ImageSource to the image as:
(This code is in UI Folder and image is in Resource folder)
<Local:ImageButton x:Name="buttonBrowse1" Width="100" Margin="10,0,10,0"
Content="Browse ..." ImageSource="../Resources/BrowseFolder.bmp"/>
But if i take a simple image it gets displayed if same source is specified.
Can anyone tell me what shall be done?
You need to replace the Binding in your ControlTemplate by a TemplateBinding, just as you did for the Content property:
<Image Margin="0,0,3,0" Source="{TemplateBinding ImageSource}" />
Furthermore, the definition of your DependencyProperty is not correct. The string should read ImageSource instead of just Source:
DependencyProperty.Register("ImageSource", typeof(ImageSource), ...
I do not know whether/where this name conflict causes any problems, but at least it is highly recommended to use the exact name of the actual CLR property.
EDIT: You will also have to change the TargetType of your Style to your ImageButton:
<Style TargetType="{x:Type Local:ImageButton}">

Resources