Как изменить DataTemplate выбранного элемента GridView

У меня есть следующий шаблон данных для моего элемента 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>

Now any Item is selected in this GridView by the user I want to change the DataTemplate of the selected Item as following. 

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

Я читал о селекторе шаблонов. но он выберет шаблон при привязке.

Есть ли способ изменить шаблон данных для выбранного элемента?


xaml win-universal-app datatemplate datatemplateselector windows-phone-8.1
person Muhammad Saifullah    schedule 11.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если я правильно прочитал ваши шаблоны, вы хотите, чтобы некоторые дополнительные сведения отображались после того, как пользователь выбрал элемент, верно? Изменение шаблона — не лучший способ сделать это.

Вы должны добавить какое-то свойство «ShowDetails» в свой itemViewModel (или любой другой тип элементов в вашем gridview), а затем изменить визуализацию внутри шаблона в соответствии с этим свойством.

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

person Kai Brummund    schedule 11.12.2014
comment
Вы правы, выбирая элемент, я хочу показать более подробную информацию. Я делал то же самое, чтобы показать нижнюю часть, но в моем GridView это работает только для первого элемента :( другие элементы не меняют свою высоту, поэтому нижняя часть остается скрытой. - person Muhammad Saifullah; 11.12.2014
comment
Не уверен на 100% (знания до версии 8.1), но: Gridview имеет свойства ItemHeight и ItemWidth для определения размера элементов. Если вы не установите их, будет измеряться только первый элемент. Однако Gridview не поддерживает изменение размеров элементов во время выполнения. Вы должны проверить, можете ли вы переключиться на представление списка или, возможно, показать расширенные свойства в наложении, которое не изменяет размер контейнера элемента. - person Kai Brummund; 11.12.2014