根据绑定值使用不同的XAML模板

时间:2017-04-10 19:08:12

标签: c# xaml uwp

我正在使用以下代码在ListView中显示一些数据,这工作正常。我想要做的是在列表中显示一个略有不同的模板,具体取决于绑定值的值。

任何人都可以提供一些示例代码来允许我这样做吗?我想显示一些更多的文本块,具体取决于名为Realtime的绑定值的值。换句话说,如果Realtime存在显示一个模板,如果它不显示另一个模板。

提前致谢!

    <ListView x:Name="list" IsItemClickEnabled="False" Margin="0,300,0,0" SelectionMode="None">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>

        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="4*"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Scheduled}"/>

                    <StackPanel Grid.Column="1">
                        <TextBlock TextTrimming="WordEllipsis" Text="{Binding Destination}"/>
                        <TextBlock TextTrimming="WordEllipsis" Text="{Binding Company}"/>
                    </StackPanel>

                    <TextBlock Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Route}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

1 个答案:

答案 0 :(得分:4)

您可以创建一个DataTemplateSelector,以根据每个项目获取不同的模板

https://marcominerva.wordpress.com/2013/02/18/dynamically-choose-datatemplate-in-winrt/

//MyDataTemplateSelector.cs
public class MyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate TextTemplate { get; set; }
    public DataTemplate ImageTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, 
                                                       DependencyObject container)
    {
        //Here you can cast 'item' and check the RealTime value
        if (item is TextItem)
            return TextTemplate;
        if (item is ImageItem)
            return ImageTemplate;

        return base.SelectTemplateCore(item, container);
    }
}

//XAML
<Page.Resources>
    <DataTemplate x:Key="TextDataTemplate">
        <Border BorderBrush="LightGray" BorderThickness="1">
            <Grid HorizontalAlignment="Left" Width="400" Height="280">
                <StackPanel>
                    <TextBlock Text="{Binding Name}" Margin="15,0,15,20"
                               Style="{StaticResource TitleTextStyle}"
                        TextWrapping="Wrap" TextTrimming="WordEllipsis" MaxHeight="40"/>
                    <TextBlock Text="{Binding Content}" Margin="15,0,15,0" Height="200"
                        TextWrapping="Wrap" TextTrimming="WordEllipsis"/>
                </StackPanel>
            </Grid>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="ImageDataTemplate">
        <Grid HorizontalAlignment="Left" Width="400" Height="280">
            <Border Background=
                    "{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                <Image Source="{Binding Url}" Stretch="UniformToFill"/>
            </Border>
            <StackPanel VerticalAlignment="Bottom"
                        Background=
                        "{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                <TextBlock Text="{Binding Name}"
                           Foreground=
                           "{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                           Style="{StaticResource TitleTextStyle}"
                           Height="40" Margin="15,0,15,0"/>
            </StackPanel>
        </Grid>
    </DataTemplate>

    <local:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
        TextTemplate="{StaticResource TextDataTemplate}"
        ImageTemplate="{StaticResource ImageDataTemplate}">
    </local:MyDataTemplateSelector>
</Page.Resources>

<GridView
    x:Name="itemGridView"
    Padding="116,137,40,46"      
    ItemTemplateSelector="{StaticResource MyDataTemplateSelector}" />