Как да промените DataTemplate на избран GridView елемент

Имам следния шаблон за данни за моя GridView Item. Искам да променя шаблона за данни на избрания елемент в 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>

Четох за селектора на шаблони. но ще избере шаблона, докато обвързва.

Има ли начин да промените шаблона за данни за избрания елемент?


person Muhammad Saifullah    schedule 11.12.2014    source източник


Отговори (1)


Ако прочетох вашите шаблони правилно, искате да се покажат някои допълнителни подробности, след като потребителят избере елемент, нали? Промяната на шаблона не е най-добрият начин да направите това.

Трябва да добавите някакво свойство "ShowDetails" към вашия itemViewModel (или какъвто и да е типът на елементите във вашия gridview) и след това да промените визуализацията в шаблона според това свойство.

Все още можете да използвате събитието SelectionChanged на gridview, за да зададете това свойство на избрания елемент, или просто да поставите бутон в шаблона, който задейства промяната.

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