ItemsControl разделенные запятыми значения в приложении UWP

Question

Я пытаюсь связать имя с разделенными запятыми значениями. В последнем пункте я не хочу добавлять запятую. Подскажите пожалуйста, как удалить последнюю запятую в приложении WinRT?

<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, <=== (необходимо убрать последнюю запятую)

Answer 1

Вы можете добавить флаг в вашей модели представления, чтобы определить, показывать ли запятую. Например:

В MyViewModel, добавить IsLast свойство как флаг:

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

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

Затем в XAML свяжите Visibility собственностью TextBlock в 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:

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();
    }
}

После этого мы можем добавить некоторые данные для теста:

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;
}

Обновить:

Добавление флага для запятой в viewmodel не очень хороший подход. Использование селектора шаблона данных для переключения между шаблоном с запятой и без нее может быть лучшим способом.

Для этого нам понадобятся два шаблона: шаблон для первого элемента не должен содержать запятую, а для остальных нужна запятая:

<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 метод, чтобы получить индекс контейнера, а затем определить, является ли элемент первым элементом ItemsControl Сравнивая индекс:

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;

    }
}

После этого мы можем добавить MyTemplateSelector в Page.Resources как следующее:

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

Тогда мы можем использовать его в ItemsControl:

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