UWP 应用中的 ItemsControl 逗号分隔值 [英] ItemsControl comma separated values in UWP app

问题描述

我正在尝试使用逗号分隔值绑定名称.在最后一项中，我不想添加逗号.你能告诉我如何删除 WinRT 应用程序中的最后一个逗号吗?

I am trying to bind name with comma-separated values. In the last item I don't want to add a comma. Can you please let me know how to remove the last comma in WinRT application?

<ItemsControl ItemsSource="{Binding xxxx}" >
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"></StackPanel>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" Margin="0,-6,0,0" >    
                                        <HyperlinkButton x:Name="name" Content="{Binding Name}" VerticalAlignment="Top" Style="{ThemeResource TileContentHyperlinkStyle}"  ></HyperlinkButton>
                                        <TextBlock x:Name="Comma" x:Uid="/Resources/Comma" Style="{ThemeResource TileContentStyle}" VerticalAlignment="Center" Margin="0,0,5,0" />
                                    </StackPanel>
                             </DataTemplate>
                            </ItemsControl.ItemTemplate>  

示例输出:

Ramesh ,Sutha,Nikhil, <=== (需要去掉最后一个逗号)

Ramesh ,Sutha,Nikhil, <=== (need to remove last comma)

推荐答案

你可以在你的视图模型中添加一个标志来检测是否显示逗号.例如:

You can add a flag in your view model to detect whether to show the comma. For example:

在 MyViewModel 中，添加一个 IsLast 属性作为标志:

In MyViewModel, add a IsLast property as the flag:

public class MyViewModel
{
    public string Name { get; set; }

    public bool IsLast { get; set; } = false;
}

然后在XAML中，将TextBlock的Visibility属性绑定到IsLast:

Then in XAML, bind the Visibility property of TextBlock to IsLast:

<ItemsControl ItemsSource="{Binding }">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0,-6,0,0" Orientation="Horizontal">
                <HyperlinkButton x:Name="suspectname"
                                 VerticalAlignment="Top"
                                 Content="{Binding Name}"
                                 Style="{ThemeResource IncidentSmallTileContentHyperlinkStyle}" />
                <TextBlock x:Uid="/Resources/Comma"
                           x:Name="Comma"
                           Margin="0,0,5,0"
                           VerticalAlignment="Center"
                           Style="{ThemeResource IncidentSmallTileContentStyle}"
                           Visibility="{Binding IsLast,
                                                Converter={StaticResource MyVisibilityConverter}}" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这里我们需要一个Converter来将bool转换为Visibility:

Here we need a Converter to convert bool to Visibility:

public class MyVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var isLast = (bool)value;
        if (isLast)
        {
            return Visibility.Collapsed;
        }
        else
        {
            return Visibility.Visible;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

在此之后，我们可以添加一些数据进行测试:

After this, we can add some data to have a test:

public MainPage()
{
    this.InitializeComponent();

    List<MyViewModel> MyList = new List<MyViewModel>() {
        new MyViewModel() { Name = "Ramesh" },
        new MyViewModel() { Name = "Sutha" },
        new MyViewModel() { Name = "Nikhil", IsLast = true }
    };
    this.DataContext = MyList;
}

更新:

在视图模型中为逗号添加标志不是一个好方法.使用数据模板选择器在带逗号和不带逗号的模板之间切换可能是更好的方法.

Adding a flag for comma in the viewmodel is not a good approach. Using a data template selector to switch between a template with and without the comma may be a better way.

为此，我们首先需要两个模板，第一项的模板不应有逗号，其他项的模板应有逗号:

To do this, we need two templates first, the template for the first item should have no comma and the others need a comma:

<DataTemplate x:Key="CommonDataTemplate">
    <StackPanel Margin="0,-6,0,0" Orientation="Horizontal">
        <TextBlock x:Name="Comma"
                   Margin="0,0,5,0"
                   VerticalAlignment="Center"
                   Text="," />
        <HyperlinkButton x:Name="suspectname"
                         VerticalAlignment="Top"
                         Content="{Binding Name}" />
    </StackPanel>
</DataTemplate>
<DataTemplate x:Key="FirstDataTemplate">
    <StackPanel Margin="0,-6,0,0" Orientation="Horizontal">
        <HyperlinkButton x:Name="suspectname"
                         VerticalAlignment="Top"
                         Content="{Binding Name}" />
    </StackPanel>
</DataTemplate> 

然后我们需要创建一个继承自 DataTemplateSelector 类 并覆盖 SelectTemplateCore 方法来实现逻辑.在方法中，我们可以使用 ItemsControl.ItemsControlFromItemContainer 方法 获取ItemsControl 和ItemsControl.IndexFromContainer方法获取容器的索引然后通过比较索引来检测item是否为ItemsControl的第一项:

Then we need to create a data template selector class which inherits from DataTemplateSelector class and override the SelectTemplateCore method to implement the logic. In the method, we can use ItemsControl.ItemsControlFromItemContainer method to get the ItemsControl and ItemsControl.IndexFromContainer method to get the index of the container then detect whether the item is the first item of the ItemsControl by comparing the index:

public class MyTemplateSelector : DataTemplateSelector
{
    public DataTemplate CommonTemplate { get; set; }
    public DataTemplate FirstTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        var itemsControl = ItemsControl.ItemsControlFromItemContainer(container);
        if (itemsControl.IndexFromContainer(container) == 0)
        {
            return FirstTemplate;
        }
        return CommonTemplate;

    }
}

之后我们可以在Page.Resources中添加MyTemplateSelector，如下所示:

After this we can add MyTemplateSelector in Page.Resources like following:

<local:MyTemplateSelector x:Key="MyTemplateSelector"
                          CommonTemplate="{StaticResource CommonDataTemplate}"
                          FirstTemplate="{StaticResource FirstDataTemplate}" />

然后我们就可以在ItemsControl中使用:

Then we can use it in ItemsControl:

<ItemsControl ItemTemplateSelector="{StaticResource MyTemplateSelector}" ItemsSource="{Binding }">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

这篇关于UWP 应用中的 ItemsControl 逗号分隔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！