如何在列表框中设置选定区域

时间:2014-01-23 08:51:18

标签: wpf xaml datatemplate

我需要做类似的事情:

enter image description here

它是包含元素的自定义DataTemplate的列表框。 (我把绿色列为整个列表中的一个元素。)

现在我有了这个:

enter image description here

如果它是真的 - 如何更改我的DataTemplate(或列表框样式)以获得第一个结果? (以某种方式设置选定的区域)

的DataTemplate

<DataTemplate x:Key="TrackDataTemplate">
    <Grid Margin="0,-5,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="70"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="{Binding FirstPlatformName}" Grid.Row="0" Grid.Column="0"/>
        <Path x:Name="Node"
            Margin="10,0" Grid.Row="0" Grid.Column="1"
            Data="M3.1999443,36.501999 L47.300057,36.501999 47.292366,36.517475 C43.192585,44.521747 34.86105,50 25.25,50 15.638952,50 7.3074172,44.521747 3.2076359,36.517475 z M25.25,0.5 C38.919049,0.49999976 50,11.580952 50,25.25 50,27.599367 49.672657,29.87228 49.061096,32.025615 L48.919384,32.501999 1.5806161,32.501999 1.438906,32.025615 C0.82734287,29.87228 0.5000003,27.599367 0.5,25.25 0.5000003,11.580952 11.580953,0.49999976 25.25,0.5 z"
            Fill="{DynamicResource white75}" Stretch="Fill"
            Width="17"  Height="17"/>
        <Rectangle x:Name="Connection" Grid.Row="1" Grid.Column="1"
            HorizontalAlignment="Center" VerticalAlignment="Top"
            Fill="{DynamicResource white75}"  Height="17" Width="4" Margin="10,2,10,0"/>
        <TextBlock Grid.Row="1" Grid.Column="2" TextWrapping="Wrap"
            Text="{Binding TsAndChannelNumber}"/>
    </Grid>
</DataTemplate>

列表框

<ListBox Grid.Column="1"
    SelectedItem="{Binding SelectedTrackSegment}"
    ItemsSource="{Binding SelectedTrack.Segments}"
    ItemTemplate="{StaticResource TrackDataTemplate}"
    Margin="30,20,30,0"/>

2 个答案:

答案 0 :(得分:2)

要完全控制ListBoxItem,您可能需要更改ItemContainerStyle中的模板。 下面是一个小测试项目,以显示我的意思。 NB我在你的文本块周围添加了2个网格,以便可以使用触发器更改背景属性。

的Xaml

 <ListBox x:Name="MyList">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Grid Margin="0,-5,0,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="70"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <Grid x:Name="PlatformGrid">
                                    <TextBlock Text="{Binding FirstPlatformName}" />
                                </Grid>
                                <Path x:Name="Node"
                                                Margin="10,0" Grid.Row="0" Grid.Column="1"
                                                Data="M3.1999443,36.501999 L47.300057,36.501999 47.292366,36.517475 C43.192585,44.521747 34.86105,50 25.25,50 15.638952,50 7.3074172,44.521747 3.2076359,36.517475 z M25.25,0.5 C38.919049,0.49999976 50,11.580952 50,25.25 50,27.599367 49.672657,29.87228 49.061096,32.025615 L48.919384,32.501999 1.5806161,32.501999 1.438906,32.025615 C0.82734287,29.87228 0.5000003,27.599367 0.5,25.25 0.5000003,11.580952 11.580953,0.49999976 25.25,0.5 z"
                                                Fill="Blue" Stretch="Fill" 
                                                Width="17"  Height="17"/>

                                <Rectangle x:Name="Connection" Grid.Row="1" Grid.Column="1" 
                                                HorizontalAlignment="Center" VerticalAlignment="Top"
                                                Fill="Blue"  Height="17" Width="4" Margin="10,2,10,0"/>
                                <Grid x:Name="TSGrid" Grid.Row="1" Grid.Column="2">
                                    <TextBlock  TextWrapping="Wrap" Text="{Binding TsAndChannelNumber}"/>
                                </Grid>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="Selector.IsSelectionActive" Value="True"/>
                                        <Condition Property="IsSelected" Value="True"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Background" TargetName="PlatformGrid" Value="Red"/>
                                    <Setter Property="Background" TargetName="TSGrid" Value="Red"/>
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

MainWindows.cs

public MainWindow()
    {
        InitializeComponent();

        Loaded += (s, args) =>
            {
                this.DataContext = this;
                MyList.ItemsSource = LoadSegments();
            };
    }

    private static List<Segment> LoadSegments()
    {
        var segments = new List<Segment>
        {
            new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber0" },
            new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber1" },
            new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber2" },
            new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber3" },
            new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber4" }
        };
        return segments;
    }

Segment.cs

public class Segment
{
    public string FirstPlatformName { get; set; }
    public string TsAndChannelNumber { get; set; }
}

理想情况下,您需要在Blend中“编辑”ItemContainerStyle模板的副本,以便您可以访问所有标准行为,然后编辑上面的Trigger IsSelected 希望有所帮助

答案 1 :(得分:0)

但我建议使用两个ListBox并使用IsSynchronizedWithCurrentItem属性为true。因此,当您对其中一个进行选择时,它将自动选择其他项目。您可以为每个列表框定义自己的数据模板。