How do i create a usercontrol that i can place stuff into? - wpf

Question

I'm trying to make a custom ScrollViewer uc and it occurred to me that I wouldn't know how to put things within the tags of it. For an example
<CustomScrollViewer>
<This is the place where i want to put things>
</CustomScrollViewer>
Is it possible to define an area where the "inside" things will be put?

Answer 1

You may doing this like as: create a dependency property for UserControl of IEnumerable type, and bind the ItemsSource, that you want scrolling.
MainWindow
<Window x:Class="ScrollViewerUserControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:this="clr-namespace:ScrollViewerUserControl"
WindowStartupLocation="CenterScreen"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<x:Array x:Key="ParametersArray" Type="{x:Type sys:String}">
<sys:String>0</sys:String>
<sys:String>1</sys:String>
<sys:String>2</sys:String>
<sys:String>3</sys:String>
</x:Array>
</Window.Resources>
<Grid>
<this:CustomScrollViewer Width="100"
Height="30"
ItemsSource="{StaticResource ParametersArray}" />
</Grid>
</Window>
CustomScrollViewer.xaml
<Grid>
<ScrollViewer Background="Aquamarine"
Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}">
<ItemsControl ItemsSource="{Binding Path=ItemsSource, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</ScrollViewer>
</Grid>
CustomScrollViewer.xaml.cs
public partial class CustomScrollViewer : UserControl
{
public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(CustomScrollViewer));
public IEnumerable ItemsSource
{
get
{
return this.GetValue(ItemsSourceProperty) as string;
}
set
{
this.SetValue(ItemsSourceProperty, value);
}
}
public CustomScrollViewer()
{
InitializeComponent();
}
}
But I think, in this case it's better create a CustomScrollViewer like this:
public class CustomScrollViewer : ScrollViewer
{
// Your additional logic here
}
And in XAML use like this:
<this:CustomScrollViewer Width="100" Height="20">
<ItemsControl ItemsSource="{StaticResource ParametersArray}" />
</this:CustomScrollViewer>

Answer 2

What do you mean 'put things into'?
In your example of a custom ScrollViewer, it would work exactly how you'd use a normal ScrollViewer, for example:
<ScrollViewer>
<DataGrid /> // or whatever controls you want to place within the scrollviewer
</ScrollViewer>
becomes
<CustomScrollViewer>
<DataGrid /> // or whatever controls you want to place within the scrollviewer
</CustomScrollViewer>
For this kind of layout control, it wraps other controls ... so just extend the ScrollViewer to add whatever changes you want to it.
If you mean having new properties on that CustomScrollViewer then follow Anatoliy's guidelines on creating new dependecy properties, which would allow you to do things like ...
<CustomScrollViewer myCustomProperty="WickeyWickeyWhack">
<DataGrid /> // or whatever controls you want to place within the scrollviewer
</CustomScrollViewer>