堆栈内存溢出
  繁体   English   中英

具有两个（几乎相似）模板的两个列表框

[英]Two ListBoxes with two (almost similar) templates

 原文  2019-11-26 14:40:41  6   2    wpf/ data-binding/ listbox/ datatemplate/ listboxitem

问题描述

我有2个具有2个数据模板的列表框，它们几乎相同，除了其中一个包含TextBox而不是ComboBox。

第一个模板： 

<DataTemplate x:Key="OldPanelsTemplate" DataType="{x:Type VM:CustomPanelBoard}">
    <Grid Height="60" Margin="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="35"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Border Height="60" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="Blue" BorderThickness="1" Width="35" Background="Blue"
                Margin="0 0 2 0" >
            <TextBlock  Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Blue" 
                        Text="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=(ItemsControl.AlternationIndex), 
                Converter={StaticResource IncrementerConverter}}" />
        </Border>
        <TextBlock Grid.Column="1" Text="{Binding Name}" />
        <TextBlock Grid.Column="2" Text="{Binding DistributionSystemName}"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="Number of circuits to be copied: "/>
        <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding NumberOfCircuitsToBeCopied}" />
    </Grid>
</DataTemplate>

第二个模板： 

<DataTemplate x:Key="NewPanelsTemplate" DataType="{x:Type VM:CustomPanelBoard}">
    <Grid Height="60">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="35"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Border Height="60" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="Blue" BorderThickness="1" Width="35" Background="Blue"
                Margin="0 0 2 0" >
            <TextBlock  Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Blue" 
                        Text="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=(ItemsControl.AlternationIndex), 
                Converter={StaticResource IncrementerConverter}}" />
        </Border>
        <TextBlock Grid.Column="1" Text="{Binding Name}" />
        <ComboBox Grid.Column="2" ItemsSource="{Binding ValidDistributionSystemsForPanel}" 
                  SelectedItem="{Binding SelectedValidDistributionSystemsForPanel}" HorizontalAlignment="Stretch"  
                  IsHitTestVisible="{Binding DistributionSystemNotAssigned}" IsEnabled="{Binding DistributionSystemNotAssigned}" 
                  ItemTemplate="{StaticResource DistributionSystemTemplate}" >
        </ComboBox>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="Number of available ways: "/>
        <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding NumberOfAvailableWays}" />
    </Grid>
</DataTemplate>

如您所见，除了这部分外，它们几乎完全相同： 

<ComboBox Grid.Column="2" ItemsSource="{Binding ValidDistributionSystemsForPanel}" 
                  SelectedItem="{Binding SelectedValidDistributionSystemsForPanel}" HorizontalAlignment="Stretch"  
                  IsHitTestVisible="{Binding DistributionSystemNotAssigned}" IsEnabled="{Binding DistributionSystemNotAssigned}" 
                  ItemTemplate="{StaticResource DistributionSystemTemplate}" >
        </ComboBox>

问题是，无论何时我更改其中一个中的任何内容，我都必须同时更改另一个中的相同内容...可以以某种方式合并它们并使组合框成为根据哪个列表框正在调用的唯一变量的任何方式模板？

2 个解决方案

解决方案1
 0 已采纳  2019-11-27 00:18:47

在这里尝试如何实现这一目标，但是我不得不承认这很麻烦，但是盲目地回答了您的问题！ 更好的方法是正确实现DataTemplateSelector 。

想法是将更改的部分分离为两个单独的DataTemplates ，并将它们放入资源中，一个带有Combobox ，另一个用于TextBlock ： 

<DataTemplate x:Key="DataTemplateCombobox">
        <ComboBox  ItemsSource="{Binding ValidDistributionSystemsForPanel}" ...>
        </ComboBox>
</DataTemplate>
<DataTemplate x:Key="DataTemplateTextblock" >
        <TextBlock Text="{Binding DistributionSystemName}" ... />
</DataTemplate>

现在，这些控件将在您的主（通用） DataTemplate替换为ContentPresenter 。 ContentPresenter使用ContentTemplateSelector根据要应用此DataTemplate的ListBox的名称选择要使用的子DataTemplate，这就是为什么使用祖先绑定将Content直接绑定到ListBox ： 

 <local:ValueDataTemplateSelector x:Key="TemplateSelector" 
                                     DefaultDataTemplate="{StaticResource DataTemplateTextblock}" 
                                     ComboboxDataTemplate="{StaticResource DataTemplateCombobox}" 
                                     TextBlockDataTemplate="{StaticResource DataTemplateTextblock}" />
    <DataTemplate x:Key="OldPanelsTemplate">
        <Grid Height="60" Margin="0" Name="OldPanelsTemplateGrid" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="35"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Border Height="60" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="Blue" BorderThickness="1" Width="35" Background="Blue"
                    Margin="0 0 2 0" >
                <TextBlock  Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Blue" Text="tex" />
            </Border>
            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" />
            <ContentPresenter ContentTemplateSelector="{StaticResource TemplateSelector}" Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" Grid.Row="0" Grid.Column="2">

            </ContentPresenter>
            <TextBlock Grid.Row="1" Grid.Column="1" Text="Number of circuits to be copied: "/>
            <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding NumberOfCircuitsToBeCopied}" />
        </Grid>
    </DataTemplate>

这里是应该如何（基本上）实现DataTemplateSelector ： 

public class ValueDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultDataTemplate { get; set; }
    public DataTemplate ComboboxDataTemplate { get; set; }
    public DataTemplate TextBlockDataTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var lb = item as ListBox;

        if (lb is null)
            return DefaultDataTemplate;

        if (lb.Name == "ListOne")
            return ComboboxDataTemplate;
        if (lb.Name == "ListTwo")
            return TextBlockDataTemplate;
        return DefaultDataTemplate;
    }
}

最后，由于您的子DataTemplates由于ContentPresenter的Content直接绑定到ListBox而丢失了它们的DataContext，因此只需使用ElementName Binding或其他方法再次钩住其DataContext ： 

 <DataTemplate x:Key="DataTemplateCombobox">
        <ComboBox DataContext="{Binding ElementName=OldPanelsTemplateGrid, Path=DataContext}"  ItemsSource="{Binding ValidDistributionSystemsForPanel}" >
        </ComboBox>
    </DataTemplate>
    <DataTemplate x:Key="DataTemplateTextblock" >
        <TextBlock Text="{Binding DistributionSystemName}"  DataContext="{Binding ElementName=OldPanelsTemplateGrid, Path=DataContext}"/>
    </DataTemplate>

OldPanelsTemplateGrid是主DataTemplate中的第一个网格，应该具有有效的ListBoxItem DataContext 。

这是完整的Xaml代码： 

   </Window ...
DataContext="{Binding RelativeSource={RelativeSource Self}}"
    Title="MainWindow" Height="450" Width="800" >
<Window.Resources>
    <DataTemplate x:Key="DataTemplateCombobox">
        <ComboBox DataContext="{Binding ElementName=OldPanelsTemplateGrid, Path=DataContext}"  ItemsSource="{Binding ValidDistributionSystemsForPanel}" >
        </ComboBox>
    </DataTemplate>
    <DataTemplate x:Key="DataTemplateTextblock" >
        <TextBlock Text="{Binding DistributionSystemName}"  DataContext="{Binding ElementName=OldPanelsTemplateGrid, Path=DataContext}"/>
    </DataTemplate>
    <local:ValueDataTemplateSelector x:Key="TemplateSelector" 
                                     DefaultDataTemplate="{StaticResource DataTemplateTextblock}" 
                                     ComboboxDataTemplate="{StaticResource DataTemplateCombobox}" 
                                     TextBlockDataTemplate="{StaticResource DataTemplateTextblock}" />
    <DataTemplate x:Key="OldPanelsTemplate">
        <Grid Height="60" Margin="0" Name="OldPanelsTemplateGrid" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="35"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Border Height="60" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="Blue" BorderThickness="1" Width="35" Background="Blue"
                    Margin="0 0 2 0" >
                <TextBlock  Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Blue" Text="tex" />
            </Border>
            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" />
            <ContentPresenter ContentTemplateSelector="{StaticResource TemplateSelector}" Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" Grid.Row="0" Grid.Column="2">

            </ContentPresenter>
            <TextBlock Grid.Row="1" Grid.Column="1" Text="Number of circuits to be copied: "/>
            <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding NumberOfCircuitsToBeCopied}" />
        </Grid>
    </DataTemplate>

</Window.Resources>
<!--DataContext="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=2,AncestorType=DataTemplate}}"-->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ListBox x:Name ="ListOne" ItemsSource="{Binding MyCollection}" ItemTemplate="{StaticResource OldPanelsTemplate}"/>
    <ListBox x:Name ="LisTwo"  ItemsSource="{Binding MyCollection}" ItemTemplate="{StaticResource OldPanelsTemplate}" Grid.Row="1"/>
</Grid>

解决方案2
 0  2019-11-27 09:30:39

我设法通过将它们合并到一个模板中来解决此问题： 

    <DataTemplate x:Key="NewOldPanelsTemplate" DataType="{x:Type VM:CustomPanelBoard}">
    <Grid Height="60">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="35"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Border Height="60" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="Blue" BorderThickness="1" Width="35" Background="Blue"
                Margin="0 0 2 0" >
            <TextBlock  Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Blue" 
                        Text="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=(ItemsControl.AlternationIndex), 
                Converter={StaticResource IncrementerConverter}}" />
        </Border>
        <TextBlock Grid.Column="1" Text="{Binding Name}" />
        <!-- To have same template for new and old panels we had the two elements (combobox and textblock) for distribution system and toggle visibility by converters according to their groupbox title -->
        <ComboBox Grid.Column="2" ItemsSource="{Binding ValidDistributionSystemsForPanel}" 
                  SelectedItem="{Binding SelectedValidDistributionSystemsForPanel}" HorizontalAlignment="Stretch"  
                  IsHitTestVisible="{Binding DistributionSystemNotAssigned}" IsEnabled="{Binding DistributionSystemNotAssigned}" 
                  ItemTemplate="{StaticResource DistributionSystemTemplate}" 
                  Visibility="{Binding RelativeSource={RelativeSource AncestorType=GroupBox, Mode=FindAncestor}, Path=Header,Converter={StaticResource NewPanelsTemplateVisibilityConverter}}">
        </ComboBox>
        <TextBlock Grid.Column="2" Text="{Binding DistributionSystemName}"
                   Visibility="{Binding RelativeSource={RelativeSource AncestorType=GroupBox, Mode=FindAncestor}, Path=Header,Converter={StaticResource OldPanelsTemplateVisibilityConverter}}"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="Number of available ways: "/>
        <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding NumberOfAvailableWays}" />
    </Grid>

</DataTemplate>

并使用类似的转换器控制可变零件（在我的情况下为ComboBox和TextBlock）的可见性： 

 public class OldPanelsTemplateVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if ((string)value == "Old Panels")
        {
            return Visibility.Visible;
        }
        return Visibility.Collapsed;
    }
}


public class NewPanelsTemplateVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if ((string)value == "Old Panels")
        {
            return Visibility.Collapsed;
        }
        return Visibility.Visible;
    }}

上面的解决方案基于我的每个列表框都被带有特定标题的groupbox包围着（在其他情况下，您可能希望在转换器中使用ListBox名称作为可见性切换）感谢@PavelAnikhouski提供的转换器概念。

我也尝试了@SamTheDev提出的DataTemplateSelector的解决方案，它也可以工作（感谢@SamTheDev），但是我更喜欢转换器解决方案，因为我不满意通过使用内容呈现器来丢失数据上下文的想法（最重要的是两种解决方案都有效，没有人会更优雅，这只是个人喜好）

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 计算ListBoxes中两个值的总和？ 如何在两个同步框中动态显示ListBoxes 在两个列表框之间同步（多）选择 C＃WPF绑定TabControl上的两个列表框 自动调整具有两个列表框的简单表单的大小 WPF两个列表框之间的单个选择 自定义两个列表框的样式，一个在另一个内 将两个 Listbox 中的 SelectedItems 绑定到一个 Listbox 基于条件MVVM对项目进行分组的两个列表框 WPF-两个相同的列表框，仅显示一个
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM