将包含不同元素的绑定列表添加到Itemscontrol

时间:2014-07-08 08:34:08

标签: c# wpf mvvm

我正在使用MVVM软件架构开发WPF应用程序。在我的ViewModel中,我有一个名为SelectedAttributes的属性。

private ObservableCollection<NodeAttributeViewModel> _selectedAttributes;
public ObservableCollection<NodeAttributeViewModel> SelectedAttributes
{
    get
    {
        return _selectedAttributes;
    }
    set
    {
        _selectedAttributes = value;
        OnPropertyChanged("SelectedAttributes");
    }
}

NodeAttributeViewModel定义为

class NodeAttributeViewModel : ViewModelBase
{
    public enum ElementType { BOOL, STRING }
    public ElementType Type { get; set; }
    public NodeAttribute Attribute { get; set; }

    public string AttributeName
    {
        get
        {
            return Attribute.Attribute;
        }
        set
        {
            Attribute.Attribute = value;
            OnPropertyChanged("AttributeName");
        }
    }

    public string AttributeValue
    {
        get
        {
            return Attribute.Value;
        }
        set
        {
            if (!Attribute.Value.Equals(value))
            {
                Attribute.Value = value;
                OnPropertyChanged("AttributeValue");
            }
        }
    }
}

我想将SelectedAttributes列表绑定到ItemsControl。根据列表元素的元素类型,我想显示一个复选框(对于布尔值),TextBox(对于String)。目前我能够显示TextBox中的所有元素。我不知道如何显示类型为布尔

的元素的复选框

这是我的Xaml

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Column="2"  Margin="9,6,9,6">
    <StackPanel>
        <ItemsControl ItemsSource="{Binding Path=SelectedAttributes}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid Margin="4">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="2*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding AttributeName}" />
                            <TextBox Text="{Binding AttributeValue}" Grid.Column="1" />
                        </Grid>
                        <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Grid.Row="1"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>                    
    </StackPanel>
</ScrollViewer>

2 个答案:

答案 0 :(得分:1)

你去吧

您可以使用DataTrigger来控制应为不同类型的属性显示哪种类型的编辑器

    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid Margin="4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="2*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding AttributeName}" />
                <TextBox x:Name="text"
                            Text="{Binding AttributeValue}"
                            Grid.Column="1" />
                <CheckBox x:Name="check"
                            IsChecked="{Binding AttributeValue}"
                            Grid.Column="1"
                            Visibility="Collapsed" />
            </Grid>
            <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"
                        Grid.Row="1" />
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Type}"
                            Value="BOOL">
                <Setter Property="Visibility"
                        TargetName="check"
                        Value="Visible" />
                <Setter Property="Visibility"
                        TargetName="text"
                        Value="Collapsed" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

我在CheckBox中添加same column作为TextBox,并将其默认设置为“崩溃”

Type的值为BOOL时,触发器设置器将swap Visibility CheckBoxTextBox因此会显示CheckBox TextBox消失,当值不是BOOL时,它也会重置它

答案 1 :(得分:0)

您可以根据Type属性

将Trigger置于Checkbox可见性上
             <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid Margin="4">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="2*" />
                            </Grid.ColumnDefinitions>
                            <CheckBox>
                                <CheckBox.Style>
                                    <Style TargetType="CheckBox">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Type}" Value="BOOL">
                                                <Setter Property="Visibility" Value="Collapsed"></Setter>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </CheckBox.Style>
                            </CheckBox>
                            <TextBlock Grid.Column="2"  Text="{Binding AttributeName}" />
                            <TextBox Text="{Binding AttributeValue}" Grid.Column="2" />
                        </Grid>
                        <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Grid.Row="1"/>
                    </Grid>
                </DataTemplate>