Fill the stack block inside Usercontrol

Question

I am looking for a watch, but could not find the right way to do this.

I create a "MyToolbarGroup" UserControl in which there is a GroupText and an empty stackpanel inside.

Now I want to use the MyToolbarGroup control in my other UserControl "MyUserControl" and create some buttons inside the Stackpanel of the MyToolbarGroup control .

MyToolbarGroup-XAML

<UserControl x:Class="TestUi.MyToolbarGroup"
             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:DesignWidth="153" d:DesignHeight="103">
    <Grid>
        <Border BorderBrush="Black" BorderThickness="2">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,5,5,5" />
                <Label Grid.Row="1" HorizontalContentAlignment="Center" Content="{Binding Path=GroupText}" Background="LightBlue" />
            </Grid>
        </Border>
    </Grid>
</UserControl>

MyToolbarGroup-Code

public partial class MyToolbarGroup : UserControl
{
    public static readonly DependencyProperty GroupTextProperty = DependencyProperty.Register("GroupText", typeof(string), typeof(MyToolbarGroup));

    public String GroupText
    {
        get { return (String)GetValue(GroupTextProperty); }
        set { SetValue(GroupTextProperty, value); }
    }

    public MyToolbarGroup()
    {
        InitializeComponent();
        DataContext = this;
    }
}

MyUserControl-XAML

<UserControl
             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:TestUi" x:Class="TestUi.MyUserControl" 
             mc:Ignorable="d" 
             d:DesignHeight="224" d:DesignWidth="343">
    <Grid>
        <local:MyToolbarGroup HorizontalAlignment="Left" Margin="40,30,0,0" VerticalAlignment="Top" Height="148" Width="238" GroupText="Test-Group">
            <!-- Something like that
            <Stackpanel-Inside-MyToolbarGroup>
                <Button  HorizontalAlignment="Center" VerticalAlignment="Center" Height="65" Width="65" Content="Button 1"/>
            </Stackpanel-Inside-MyToolbarGroup>
            -->
        </local:MyToolbarGroup>
    </Grid>
</UserControl>

Any ideas on how to set multiple buttons inside the stack panel?

Thanx for any help!

Answer 1

ContentPresenter MyToolbarGroup

<UserControl x:Class="TestUi.MyToolbarGroup"
             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:testUi="clr-namespace:TestUi"
             mc:Ignorable="d" d:DesignWidth="153" d:DesignHeight="103">
    <UserControl.Template>
        <ControlTemplate TargetType="UserControl">
            <Grid>
                <Border BorderBrush="Black" BorderThickness="2">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="30" />
                        </Grid.RowDefinitions>

                        <ContentPresenter Content="{TemplateBinding Content}"/>

                        <Label Grid.Row="1" HorizontalContentAlignment="Center"
                               Content="{Binding GroupText, RelativeSource={RelativeSource AncestorType=testUi:MyToolbarGroup}}"
                               Background="LightBlue" />
                    </Grid>
                </Border>
            </Grid>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

:

<testUi:MyToolbarGroup Grid.Row="2"
    HorizontalAlignment="Left" 
    VerticalAlignment="Top" 
    Height="148" Width="238" GroupText="Test-Group">
    <!--any content, e.g. -->
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="A" Margin="5"/>
        <TextBlock Text="B"  Margin="5"/>
    </StackPanel>
</testUi:MyToolbarGroup>

:

Answer 2

, MyToolbarGroup , StackPanel ItemsControl StackPanel ItemsPanel.

MyToolbarGroup XAML:

<UserControl x:Class="WpfApplication2.MyToolbarGroup"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApplication2">
    <Border BorderBrush="Black" BorderThickness="2">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="30" />
            </Grid.RowDefinitions>
            <ItemsControl Grid.Row="0" HorizontalAlignment="Center" Margin="5,5,5,5"
                          ItemsSource="{Binding GroupItems, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>

            <Label Grid.Row="1" HorizontalContentAlignment="Center"
                   Content="{Binding GroupText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
                   Background="LightBlue" />
        </Grid>
    </Border>
</UserControl>

:

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

    public string GroupText
    {
        get { return (string)GetValue(GroupTextProperty); }
        set { SetValue(GroupTextProperty, value); }
    }

    public static readonly DependencyProperty GroupTextProperty =
        DependencyProperty.Register("GroupText", typeof(string), typeof(MyToolbarGroup), new PropertyMetadata(null));

    public IEnumerable GroupItems
    {
        get { return (IEnumerable)GetValue(GroupItemsProperty); }
        set { SetValue(GroupItemsProperty, value); }
    }

    public static readonly DependencyProperty GroupItemsProperty =
        DependencyProperty.Register("GroupItems", typeof(IEnumerable), typeof(MyToolbarGroup), new PropertyMetadata(null));
}

:

<Window x:Class="WpfApplication2.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:local="clr-namespace:WpfApplication2"
        Title="MainWindow">
    <Grid>
        <local:MyToolbarGroup HorizontalAlignment="Left" Margin="40,30,0,0" VerticalAlignment="Top" Height="148" Width="238" GroupText="Test-Group">
            <local:MyToolbarGroup.GroupItems>
                <x:Array Type="{x:Type sys:Object}">
                    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Height="65" Width="65" Content="Button 1"/>
                    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Height="65" Width="65" Content="Button 2"/>
                    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Height="65" Width="65" Content="Button 3"/>
                </x:Array>
            </local:MyToolbarGroup.GroupItems>
        </local:MyToolbarGroup>
    </Grid>
</Window>

:

Answer 3

( ). , , ?

ItemsControl:

<ItemsControl ItemsSource="{Binding MyButtonDataCollection}"  >
    <ItemsControl.ItemTemplate >
        <DataTemplate >
            <Button Content="{Binding ButtonName}"
                    Command="{Binding ButtonClick}"
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

, , :

class MyButtonData : INotifyPropertyChanged
{
    String ButtonName { get; set; } //notify property changed and all that

    public ICommand ButtonClick
    {
        get;
        internal set;
    }

    private bool CanExecuteButtonClick()
    {
        //can this execute?
        return true;
    }

    private void CreateButtonClick()
    {
        ButtonClick = new RelayCommand(SaveExecute, CanExecuteSaveCommand);
    }

    public void ButtonClickExecute()
    {
        //do my logic for click
    }
}