Creating a Custom ScrollViewer using WPF UserControl

Question

I'm trying to create a ScrollViewer with some customizations. Like this:

UserControl1.xaml:

<UserControl x:Class="MyApp.Control.UserControl1"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="300">
    <UserControl.Template>
        <ControlTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <ContentPresenter Grid.Row="0" Content="{Binding ElementName=uc, Path=DynamicUserControl}" />
                <Rectangle Grid.Row="1" Fill="#88ff0000" />
            </Grid>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

UserControl1.xaml.cs:

public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty DynamicUserControlProperty = DependencyProperty.Register("DynamicUserControl", typeof(object), typeof(UserControl1), new PropertyMetadata(null));

    public object DynamicUserControl
    {
        get { return GetValue(DynamicUserControlProperty); }
        set { SetValue(DynamicUserControlProperty, value); }
    }
}

TestForm.xaml (Using the UserControl1):

<Window x:Class="MyApp.TestForm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyApp.Control"
        mc:Ignorable="d"
        Title="TestForm" Height="200" Width="500">
    <Grid Background="{StaticResource AimDarkGradBg01}">
        <local:UserControl1>
            <local:UserControl1.DynamicUserControl>
                <Button>Click me</Button>
            </local:UserControl1.DynamicUserControl>
        </local:UserControl1>
    </Grid>
</Window>

But the problem is no matter what content I put in the local:UserControl1.DynamicUserControl, nothing is rendered.

Anyone can help me?

zx485 · Accepted Answer · 2016-04-09 17:41:25Z

1

The problem is actually you binding expression. The correct binding should be like:

UserControl1.xaml:

<UserControl x:Class="MyControls.UserControl1"
             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:MyControls"
             mc:Ignorable="d"
             x:Name="uc">
    <Grid>
        <ScrollViewer>
            <WrapPanel>
                <!-- Dynamic Content -->
                <ContentPresenter Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type control:UserControl1}}, Path=DynamicUserControl}"/>
            </WrapPanel>
        </ScrollViewer>
        <Canvas>
            <!-- Some Code -->
        </Canvas>
    </Grid>
</UserControl>

If you noticed I removed your definition of the template, in which case you don't need it. You can simply just put your code inside the user control.

The other files are correct. Fix what I told you above and you're good to go.

edited Apr 9, 2016 at 17:41

zx485

29.1k28 gold badges55 silver badges65 bronze badges

answered Apr 8, 2016 at 5:03

user1618054

Sign up to request clarification or add additional context in comments.

7 Comments

Jonny Piazzi Over a year ago

Ok, I create this example, but when I run the aplication the contentpresenter of the UserControl1 is empty. (And I put thinks inside him).

user1618054 Over a year ago

@JonnyPiazzi please see addition to my answer.

Jonny Piazzi Over a year ago

Ok I tried again, the ContentPresenter inside the UserControl keeps completely empty. I'm thinking i'm using wpf 4 that has some different behaviors about many things, do you think the version is make this behavior?

user1618054 Over a year ago

Can you update your question with the exact code you're attempting to compile? The version shouldn't have anything to do with it.

user1618054 Over a year ago

Made changes to final solution.

|

Collectives™ on Stack Overflow

Creating a Custom ScrollViewer using WPF UserControl

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related