使用 MVVM 绑定 GroupBox HeaderTemplate

Question

我想创建一个带有自定义 header 的 GroupBox，其中除了 header 标题外，我还想有一个与特定 MVVM 绑定关联的图标。

例如，我使用这种方法让它工作：

查看：

<GroupBox>
    <GroupBox.Header>
        <StackPanel Orientation="Horizontal">
            <Image Height="18" VerticalAlignment="Center" Source="{Binding BondHead2Enabled, Converter={StaticResource StateToIconConverter}}" />
            <Label Content="Bond Head 2"/>
        </StackPanel>
    </GroupBox.Header>
    <finalBondView:BondheadTemplateView Content="{Binding BondHead2Content}"/>
</GroupBox>

ViewModel

public bool BondHead2Enabled => false;

public BondHeadTemplateViewModel BondHead2Content
{
    get { return _bondheadContents[1]; }
    set
    {
        if (_bondheadContents[1] != value && value != null)
        {
            _bondheadContents[1] = value;
            RaisePropertyChanged("BondHead2Content");
        }
    }
}

但是使用这种方法我必须在我拥有的每个组框上重复大量代码。所以我想把它变成一个 Header 模板，我可以在其中关联一个样式，而不是复制粘贴 header。因此我创造了这种风格：

风格

<Style x:Key="StatusGroupBox" TargetType="{x:Type GroupBox}">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Height="18" VerticalAlignment="Center" Source="{Binding EnabledStatus, RelativeSource={RelativeSource AncestorType=GroupBox}, Converter={StaticResource StateToIconConverter}}" />
                    <Label Content="{Binding Header, RelativeSource={RelativeSource AncestorType=GroupBox}}"/>
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

ViewModel

<GroupBox Header="Bond Head 3" Margin="5" Style="{DynamicResource StatusGroupBox}">
    <finalBondView:BondheadTemplateView Content="{Binding BondHead3Content}"/>
</GroupBox>

我可以使用此样式获取标签的内容，但我无法获取我需要知道要显示哪个图标的布尔值，名为 EnabledStatus风格。那么我怎样才能将这些信息以通用的方式传递给样式呢？

Answer 1

我认为您必须更改样式中该布尔值的绑定：

Source="{Binding DataContext.EnabledStatus, RelativeSource={RelativeSource AncestorType=GroupBox}, Converter={StaticResource StateToIconConverter}}"

这是因为 EnabledStatus 不是 Groupbox 本身的属性，而是它的 DataContext。

Answer 2

在阅读了更多关于推荐主题的内容后，我发现了一种有效的方法。我没有将字符串绑定到 Header 属性，而是绑定了一个包含标题（字符串）和状态（布尔值）的结构。然后我阅读了样式中的每个字段。代码：

支持class

public class StatusHeaderTemplate
{
    public string HeaderTitle { get; set; }
    public bool HeaderStatus { get; set; }

    public StatusHeaderTemplate(string title, bool status)
    {
        HeaderTitle = title;
        HeaderStatus = status;
    }
}

风格

<Style x:Key="MountainTopStatusGroupBox" TargetType="{x:Type GroupBox}">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding HeaderStatus, Converter={StaticResource StateToIconConverter}}" />
                    <Label Content="{Binding HeaderTitle}"/>
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

查看

<GroupBox Margin="5" Header="{Binding BondHead1StatusHeader}" Style="{DynamicResource MountainTopStatusGroupBox}">
    <finalBondView:BondheadTemplateView Content="{Binding BondHead1Content}"/>
</GroupBox>

ViewModel

public StatusHeaderTemplate BondHead1StatusHeader => new StatusHeaderTemplate("Bond Head 1", true);

使用 MVVM 绑定 GroupBox HeaderTemplate

Binding for a GroupBox HeaderTemplate with MVVM

wpf

groupbox

datatemplate

mvvm