如何让自定义用户可以控制存储内容？

Question

我有自定义的

UserControl

，它是一个带有水平条纹的

Grid

和一个

ItemsControl

，它有一个由两个

Ellipse

和一个

TextBlock

组成的项目模板。
代表 Item 的类是

Step

类。我需要能够直接在 XAML 中添加 Item 实例，而无需求助于 C#。

Step

班级：

public class Step
{
    public Step() { Name = string.Empty; }
    public Step(string name, Brush color) { Name = name; InnerColor = color; }

    public string Name { get; set; }
    public Brush InnerColor { get; set; }
    public Brush OuterColor { get; set; }
    public Brush CompletedColor { get; set; }
    public bool IsCompleted { get; set; }
}

StepProgressBar

：

<Grid>
    <Rectangle Height ="7" Fill="#FF00A8FF" Margin="10,0,1830,0">

    </Rectangle>
    <ItemsControl x:Name="Steps">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>

            <DataTemplate>

                <DataTemplate.Resources>
                    <Style TargetType="{x:Type Ellipse}">
                        <Setter Property="Margin" Value="10,15,0,0"/>
                    </Style>
                    <Style TargetType="{x:Type TextBlock}">
                        <Setter Property="Margin" Value="10,0,0,0"/>
                        <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
                    </Style>
                </DataTemplate.Resources>

                <StackPanel MaxWidth="75">
                    <Grid>
                        <Ellipse x:Name="EllipseOuter"  Width="20" Height="20" Fill="#FF00A8FF" />
                        <Ellipse x:Name="EllipseInner"  Width="10" Height="10" Fill="{Binding InnerColor}" />
                    </Grid>

                    <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" />
                </StackPanel>

                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsCompleted}" Value="true">
                        <Setter TargetName="EllipseInner" Property="Fill" Value="{Binding CompletedColor}" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsCompleted}" Value="false">
                        <Setter TargetName="EllipseInner" Property="Fill" Value="{Binding InnerColor}" />
                    </DataTrigger>
                </DataTemplate.Triggers>


            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

我需要在

MainWindow.xaml

中得到类似的东西：

    <Grid>
        <local:StepProgressBar x:Name="FirmwareBar" Margin="0,0,0,0">
          <local:Step Name="Test" InnerColor="Yellow" IsCompleted="false" />
          <local:Step Name="Test1" InnerColor="Green" IsCompleted="true" CompletedColor="#FF7DEEAF" />
        </local:StepProgressBar>
        
    </Grid>

我尝试使用

ContentControl

，正如类似主题之一所建议的那样，但我没有弄清楚在这种情况下应该如何以及以什么顺序放置元素。

Answer 1

您需要修改自定义用户控件的后台代码。添加一个名为

Items

且类型为

ObservableCollection<Step>

的属性。如果此集合发生变化，您应该更新您的

ItemsControl

:

public partial class UserControl1 : UserControl
{
    public ObservableCollection<Step> Items { get; set; } = new ObservableCollection<Step>();

    public UserControl1()
    {
        InitializeComponent();
        Steps.CollectionChanged += _steps_CollectionChanged;
    }

    private void _steps_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
    {
        Steps.Items.Clear();
        foreach (var item in Items)
        {
            test.Items.Add(item);
        }
    }
}

在 XAML 中，您可以通过以下方式将项目添加到用户控件中：

<local:StepProgressBar x:Name="FirmwareBar" Margin="0,0,0,0">
     <local:StepProgrssBar.Items>
          <local:Step Name="Test" InnerColor="Yellow" IsCompleted="false" />
          <local:Step Name="Test1" InnerColor="Green" IsCompleted="true" CompletedColor="#FF7DEEAF" />
    </local:StepProgrssBar.Items>
</local:StepProgressBar>

可能有一种更优雅的方法，它并不总是完全清除

ItemsControl

 的项目并再次添加整个集合，而仅修改 

ObservableCollection

 中实际已更改的项目。但如果您没有很多条目并且它们不经常更改，则只会有很小的差异。