Question

是否可以创建自定义控件，定义它的样式等，然后在使用控件时将其他控件添加到其属性中。很难解释，所以这里有一些示例代码，显然不起作用，只是这样你就可以看到我正在尝试做的事情：

<Controls:TitleContainer>
            <!-- Title Bar -->
            <Controls:TitleContainer.Title>
                <TextBlock>i Information</TextBlock>
            </Controls:TitleContainer.Title>
            <Controls:TitleContainer.Sub>
                <Button Style="{StaticResource BtnSmBlue}" Content="Search" />
            </Controls:TitleContainer.Sub>

            <!-- Main Content -->
            <StackPanel>
                <TextBlock Text="any text here... blah blah" />
                <Button Content="Buttons" />
            </StackPanel>
        </Controls:TitleContainer>

我想制作一个如下所示的控件，一个有标题的容器，一些在标题右边有一个额外的按钮，然后显然是内容。

最好的方法是什么？

Answer 1

由于@ gomi42建议我很好奇测试控件，这里有一些非常简单的例子，你不会在最后使用它，但你可以从它开始并稍后添加你的绑定。

<Window.Resources>
    <DataTemplate x:Key="HeaderTemplate1">
        <Grid Background="DarkGray">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" MinWidth="150"/>
            </Grid.ColumnDefinitions>
            <Border Width="30" Height="30" Background="AliceBlue" Grid.Column="0"></Border>
            <TextBlock Text="SomeHeader" Foreground=" White" Grid.Column="1"></TextBlock>
            <ComboBox Grid.Column="2" SelectedIndex="0" Foreground="Green">
                <ComboBoxItem>item1</ComboBoxItem>
                <ComboBoxItem>item2</ComboBoxItem>
                <ComboBoxItem>item3</ComboBoxItem>
            </ComboBox>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="HeaderTemplate2">
        <Grid Background="DarkGray">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" MinWidth="300"/>
            </Grid.ColumnDefinitions>
            <Border Width="30" Height="30" Background="AliceBlue" Grid.Column="0"/>
            <TextBlock Text="SomeHeader" Foreground=" White" Grid.Column="1"/>
            <TextBox Grid.Column="2" Background="Green" Foreground="White" Text="Asd"/>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="ButtonTemplate">
        <StackPanel Orientation="Horizontal">
            <Border Width="30" Height="30" Background="AliceBlue"/>
            <TextBlock Background="Red" Text="Some Button"/>
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="ContentTemplate1">
        <StackPanel Orientation="Vertical" Background="Purple">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="3*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Prop1" Foreground="White"/>
                <ProgressBar Grid.Column="1" Height="10" Value="35" Background="Purple" Foreground="GreenYellow" IsIndeterminate="False" Minimum="0" Maximum="100"/>
            </Grid>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="3*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Prop2" Foreground="White"/>
                <ProgressBar Grid.Column="1" Height="10" Value="75" Background="Purple" Foreground="GreenYellow" IsIndeterminate="False" Minimum="0" Maximum="100"/>
            </Grid>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="3*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Prop3" Foreground="White"/>
                <ProgressBar Grid.Column="1" Height="10" Value="15" Background="Purple" Foreground="GreenYellow" IsIndeterminate="False" Minimum="0" Maximum="100"/>
            </Grid>
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="ContentTemplate2">
        <StackPanel Orientation="Horizontal" Background="Purple">
            <Button Background="Green" Margin="10" ContentTemplate="{StaticResource ButtonTemplate}"/>
            <Button Background="Green" Margin="10" ContentTemplate="{StaticResource ButtonTemplate}"/>
            <Button Background="Green" Margin="10" ContentTemplate="{StaticResource ButtonTemplate}"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>
<Grid Background="Gray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <HeaderedContentControl HeaderTemplate="{StaticResource HeaderTemplate1}" 
                            ContentTemplate="{StaticResource ContentTemplate1}"
                            Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Margin="10"/>
    <HeaderedContentControl HeaderTemplate="{StaticResource HeaderTemplate1}" 
                            ContentTemplate="{StaticResource ContentTemplate1}"
                            Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Margin="10"/>
    <HeaderedContentControl HeaderTemplate="{StaticResource HeaderTemplate2}" 
                            ContentTemplate="{StaticResource ContentTemplate2}"
                            Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="10"/>
</Grid>

编辑您可以将其与自定义控件一起使用

我们创建一个这样的自定义控件 - 扩展HeaderedContentControl，并将其背景设置为黄色（只是为了让我们可以轻松测试）

public partial class CustomControl1 : HeaderedContentControl
{
    public CustomControl1()
    {
        InitializeComponent();
        this.Background = new SolidColorBrush(System.Windows.Media.Color.FromRgb(255,255,0));
    }
}

我们在Xaml中以相同的方式使用控件，但这次我们使用自定义控件

...
<local:CustomControl1 HeaderTemplate="{StaticResource HeaderTemplate1}" 
                            ContentTemplate="{StaticResource ContentTemplate1}"
                            Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Margin="10"/>
    <local:CustomControl1 HeaderTemplate="{StaticResource HeaderTemplate1}" 
                            ContentTemplate="{StaticResource ContentTemplate1}"
                            Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Margin="10"/>
    <local:CustomControl1 HeaderTemplate="{StaticResource HeaderTemplate2}"
                            ContentTemplate="{StaticResource ContentTemplate2}"
                            Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="10"/>
...

只有这次使用不同的 ContentTemplate2 - 请注意它的背景绑定，现在它从它的父级（我们的自定义控件）获取背景属性

<DataTemplate x:Key="ContentTemplate2">
        <StackPanel Orientation="Horizontal" 
                    Background="{Binding Background, RelativeSource={RelativeSource AncestorType=HeaderedContentControl}}">
            <Button Background="Green" Margin="10" ContentTemplate="{StaticResource ButtonTemplate}"/>
            <Button Background="Green" Margin="10" ContentTemplate="{StaticResource ButtonTemplate}"/>
            <Button Background="Green" Margin="10" ContentTemplate="{StaticResource ButtonTemplate}"/>
        </StackPanel>
    </DataTemplate>

属性中的CustomControl控件？

1 个答案: