ItemsControl以逗号分隔UWP应用程序中的值

时间:2016-01-10 19:05:54

标签: xaml windows-runtime uwp

我正在尝试使用逗号分隔值绑定名称。在最后一项中,我不想添加逗号。你能告诉我如何删除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,&lt; ===(需要删除最后一个逗号)

1 个答案:

答案 0 :(得分:1)

您可以在视图模型中添加标记以检测是否显示逗号。例如:

MyViewModel中,添加IsLast属性作为标记:

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

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

然后在XAML中,将Visibility的{​​{1}}属性绑定到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();
    }
}

<强>更新

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

为此,我们首先需要两个模板,第一个项目的模板应该没有逗号而其他模板需要逗号:

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

然后我们需要创建一个继承自DataTemplateSelector class的数据模板选择器类,并覆盖SelectTemplateCore method来实现逻辑。在该方法中,我们可以使用ItemsControl.ItemsControlFromItemContainer method获取<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> ItemsControl.IndexFromContainer method以获取容器的索引,然后检测该项是否是ItemsControl的第一项比较指数:

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