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

Update:

Добавление флаг запятой в 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 class и переопределить SelectTemplateCore method для реализации логики. В методе, мы можем использовать ItemsControl.ItemsControlFromItemContainer method, чтобы получить ItemsControl и ItemsControl.IndexFromContainer method, чтобы получить индекс контейнера затем обнаружить элемент, является ли первый элемент в 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>