如何更改所选GridView项的DataTemplate

时间:2014-12-11 06:31:19

标签: xaml windows-phone-8.1 datatemplate win-universal-app datatemplateselector

我的GridView项目有以下数据模板。我想在GridView中更改所选项的数据模板。

girdView的数据模板

<DataTemplate x:Key="SearchListItemDataTemplate1">
    <Grid Height="auto" Background="Red">
        <Grid Height="auto" Margin="14,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="110"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="55"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
            </Grid.RowDefinitions>

            <!--Image Section-->
            <Grid Height="108" Margin="0,8,0,0" VerticalAlignment="Top">
                <Grid Margin="0">
                    <Border HorizontalAlignment="Left" Margin="0" VerticalAlignment="Bottom" Width="98" Height="98" CacheMode="BitmapCache" CornerRadius="0,0,30,0">

                    </Border>
                    <Border Background="#FFf26f46"
                                            Width="40" Height="40"
                                            VerticalAlignment="Bottom" 
                                            HorizontalAlignment="Left"
                                            CornerRadius="0,0,12,0">
                        <Grid>
                            <StackPanel  HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                                <TextBlock Text="{Binding Degree}" FontSize="20" Foreground="White" VerticalAlignment="Center" />
                                <TextBlock VerticalAlignment="Center" Margin="0,3,0,0" FontSize="16" Foreground="White" Text="{Binding ConnectionDegree,Converter={StaticResource degreeToTextConverter}}" />
                            </StackPanel>
                        </Grid>
                    </Border>
                </Grid>
                <!--<Ellipse VerticalAlignment="Top" Margin="0,0,0,0" HorizontalAlignment="Right" StrokeThickness="0" Fill="{Binding Status,Converter={StaticResource statusToColorBrushConverter}}" Width="20" Height="20"></Ellipse>-->
            </Grid>
  </Grid>

现在,用户在此GridView中选择了任何项目,我想要更改所选项目的DataTemplate,如下所示。

<DataTemplate x:Key="SearchListItemDataTemplate1">
    <Grid Height="auto" Background="Red">
        <Grid Height="auto" Margin="14,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="110"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="55"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
            </Grid.RowDefinitions>

            <!--Image Section-->
            <Grid Height="108" Margin="0,8,0,0" VerticalAlignment="Top">
                <Grid Margin="0">
                    <Border HorizontalAlignment="Left" Margin="0" VerticalAlignment="Bottom" Width="98" Height="98" CacheMode="BitmapCache" CornerRadius="0,0,30,0">

                    </Border>
                    <Border Background="#FFf26f46"
                                            Width="40" Height="40"
                                            VerticalAlignment="Bottom" 
                                            HorizontalAlignment="Left"
                                            CornerRadius="0,0,12,0">
                        <Grid>
                            <StackPanel  HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                                <TextBlock Text="{Binding Degree}" FontSize="20" Foreground="White" VerticalAlignment="Center" />
                                <TextBlock VerticalAlignment="Center" Margin="0,3,0,0" FontSize="16" Foreground="White" Text="{Binding ConnectionDegree,Converter={StaticResource degreeToTextConverter}}" />
                            </StackPanel>
                        </Grid>
                    </Border>
                </Grid>
                <!--<Ellipse VerticalAlignment="Top" Margin="0,0,0,0" HorizontalAlignment="Right" StrokeThickness="0" Fill="{Binding Status,Converter={StaticResource statusToColorBrushConverter}}" Width="20" Height="20"></Ellipse>-->
            </Grid>

            <!-- Details Section  -->
            <Grid Grid.Column="1" Margin="10,8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>

                <TextBlock Foreground="#FF00579b" FontSize="20" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
               localpage:SearchView.InlineList="{Binding RunElements}" />

                <TextBlock Text="{Binding Name}" Grid.Row="1" Foreground="#FF575757" FontSize="16" Margin="0,4,0,0"></TextBlock>
                <TextBlock Text="{Binding Details}" Grid.Row="2" Height="auto" Foreground="#FF575757" FontSize="16" Margin="0,4,0,0"></TextBlock>

                <TextBlock Text="{Binding TheTextB}" VerticalAlignment="Bottom" Grid.Row="4" Foreground="#FF8fa4ad" FontSize="14" Margin="0,10,0,0"></TextBlock>
            </Grid>

            <!-- Operation Section Visibility="{Binding IsSelected, Converter={StaticResource boolToVisibiliytConverter},ConverterParameter=-1}"-->
            <Grid Grid.Column="2">
                <Button Content="{Binding ActionText}" Command="{Binding TheAction}" CommandParameter="{Binding Id}" Width="55" MinWidth="55" FontSize="16" Foreground="#FF42a046" Style="{Binding ActionStyle}"
                        />
            </Grid>


        </Grid>
    </Grid>
</DataTemplate>

我已阅读有关模板选择器的信息。但它会在绑定时选择模板。

有没有办法更改所选项目的数据模板?

1 个答案:

答案 0 :(得分:1)

如果我正确阅读了您的模板,您需要在用户选择项目后显示一些其他详细信息,对吗?更改模板不是执行此操作的最佳方式。

您应该在itemViewModel上添加某种“ShowDetails”属性(或者gridview中任何项目的类型),然后根据该属性更改模板内的可视化。

您仍然可以使用gridview的SelectionChanged事件在所选项目上设置该属性,或者只是在触发更改的模板中放置一个按钮。