Thursday, December 20, 2007

DataBinding in UserControl

Here are some guidelines to expose properties of inner Controls(Controls which are inside UserControl) through WPF UserControl.

Note: UserControl is not same as Control in which we are using Templates..
UserControl just holds other controls and wrap them.
  1. Create DP in UserControl.xaml.cs file same as of its child control.
  2. Bind this new DP with the inner control's DP
  3. Now you could use DP of inner control out side of UserControl

Here attached a sample which demonstrates this.

MyUserControl holds a slider and we are going to expose the Value DP of this through MyUserControl.

So add Value DP to MyUserControl and Bind that to Value DP of inner slider.


public partial class MySlider : System.Windows.Controls.UserControl
{
public MySlider()
{
InitializeComponent();
}
public static readonly DependencyProperty ValueProperty=DependencyProperty.Register("Value",typeof(double),typeof(MySlider));
public double Value
{
get
{
return (double)GetValue(MySlider.ValueProperty);
}
set
{
SetValue(MySlider.ValueProperty, value);
}
}
}



MyUserControl.XAML

<UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="BindingUserControl.MySlider"
Width="Auto" Height="Auto" x:Name="UserControl" >

<Grid>
<Slider Name="sldr" Value="{Binding Path=Value, ElementName=UserControl, Mode=TwoWay}" Width="100" />
</Grid>
</UserControl>

Sample

7 comments:

  1. Would this work correctly in case when user puts the slider from the sample on the window and specify some other name?
    Maybe some custom Markup Extension should be implemented and used for that purpose?

    ReplyDelete
  2. Yes.It would work..Try to put one more MySlider in window and give another name..

    <Window>
    <Grid>
    <BindingUserControl:MySlider Margin="17,29,22,0" x:Name="MySlider1" VerticalAlignment="Top" Height="46"/>

    <TextBlock Margin="17,8,117,0" VerticalAlignment="Top" Height="31" Text="UserControl 1 with slider" TextWrapping="Wrap"/>

    <Slider Margin="17,79,88,0" Value="{Binding Path=Value, ElementName=MySlider1, Mode=Default}" VerticalAlignment="Top" Height="27"/>

    <TextBlock HorizontalAlignment="Left" Margin="17,58,0,0" VerticalAlignment="Top" Width="114" Height="21" Text="Local slider 1" TextWrapping="Wrap"/>


    <BindingUserControl:MySlider Margin="17,0,22,82" x:Name="MySlider2" VerticalAlignment="Bottom" Height="46"/>

    <TextBlock Margin="17,115,117,118" Text="UserControl 2 with slider" TextWrapping="Wrap"/>

    <Slider Margin="17,0,88,51" Value="{Binding Path=Value, ElementName=MySlider2, Mode=Default}" VerticalAlignment="Bottom" Height="27"/>

    <TextBlock HorizontalAlignment="Left" Margin="17,0,0,78" Width="114" Text="Local slider 2" TextWrapping="Wrap" VerticalAlignment="Bottom" Height="21"/>

    </Grid>
    </Window>

    ReplyDelete
  3. Hello. This post is likeable, and your blog is very interesting, congratulations :-). I will add in my blogroll =). If possible gives a last there on my blog, it is about the Estabilizador e Nobreak, I hope you enjoy. The address is http://estabilizador-e-nobreak.blogspot.com. A hug.

    ReplyDelete
  4. How we can create a menu from an XML file or from a collection( Through Databinding with out iterating the datasource )

    Regards,
    Sree

    ReplyDelete
  5. See my post here.
    Both TreeView and Menu are same in the sense of Hierarchical datasource.Assign the datasource to menu like in treeview

    http://joyfulwpf.blogspot.com/2007/06/hierarchical-databinding-into-treeview.html

    ReplyDelete
  6. Hi ! Even you posted this topic quite some days ago, it now helped me out of a problem that cost me 3 days of trying ! As usual, it was one f...... word that made the difference between working and not working. Thanks a lot !

    ReplyDelete
  7. Hi !
    There's somethin I can't grasp.
    If i place a brakpoint inside getter/setter of the "Value" property, they are never reached.
    In fact, you can easily replace the property with this....

    public double Value
    {
    get
    {
    throw new InvalidOperationException("I'm never called !");
    }
    set
    {
    throw new InvalidOperationException("I'm never called !");
    }
    }

    ...and everything will work nice as like the property is not used... it just exists but it doesn't have a purpose.
    How can you explain this weird behaviour ?
    Thanks in advance.

    ReplyDelete