Question

如何根据孩子的属性更改<div class="container"> <div class="elem-left"></div> <div class="flex-column"> <section class="elem"> <p> Flexbox is so easy! </p> </section> <section class="elem"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget. </p> </section> </div> <div class="elem-right"></div> </div>的孩子？

目前我有ItemsControl：

ItemsControl

此<ItemsControl ItemsSource="{Binding FooBar}"> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBox Text="{Binding FirstName}" Grid.Column="0"/> <TextBox Text="{Binding LastName}" Grid.Column="1"/> <TextBox Text="{Binding Age}" Grid.Column="2"/> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>绑定到名为ItemsControl的{{1}}。 ObservableCollection内的每个对象都具有相同的属性。 4个属性中的3个被绑定到FooBar。 foruth属性称为ObservableCollection，类型为ItemsControl。现在我想查看这个属性。如果deletable，我想看到另一个bool。

deletable == true

如何在两个ItemsControl.ItemTemplate之间切换 - 与<ItemsControl.ItemTemplate> <DataTemplate> <Grid> //... </Grid> </DataTemplate> </ItemsControl.ItemTemplate>绑定 - 基于属性？

Answer 1

您需要做的就是根据您的删除属性显示/隐藏删除按钮。

尝试这些行：

<ItemsControl ItemsSource="{Binding FooBar}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBox Text="{Binding FirstName}" Grid.Column="0"/>
                <TextBox Text="{Binding LastName}" Grid.Column="1"/>
                <TextBox Text="{Binding Age}" Grid.Column="2"/>
                <Button Content="X" Grid.Column="3" Command="{Binding YOURDELETECOMMAND}"
                        Visibility="{Binding Deletable, Converter={StaticConverter BooleanToVisibilityConverter}}"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

请注意，您的资源中还需要以下声明

<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

备用删除命令方法

上面的Command绑定将期望在你的FooBar类上定义YOURDELETECOMMAND，如果你更愿意处理更高的删除（我将在这里假设MVVM）。正如Jai在评论中所述，这是推荐的方式，因为您可以直接访问ObservableCollection并删除相关项目。

<Button Content="X" Grid.Column="3" Command="{Binding DataContext.YOURDELETECOMMAND, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type vw:YOURVIEW}}}"
                        Visibility="{Binding Deletable, Converter={StaticConverter BooleanToVisibilityConverter}}"/>

请注意，您需要在Xaml的根目录中使用此声明。

xmlns:vw="NAMESPACE_OF_YOUR_VIEW"

ItemsControl - 基于属性的不同子项

1 个答案: