locked
Border color not appearing on selection of a gridview item C# Xaml Windows Store App

    Question

  • Hi,

    I have a gridview , whose datatemplate is another control which displays basically an image along with the name of the image...then my item tamplate is a itemsWrapGrid...

    I wrote an itemContainerStyle for this gridview..i.e.

    <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="GridViewItem">
                                    <GridViewItemPresenter
                            CheckHintBrush="{x:Null}"
                            CheckBrush="{x:Null}"
                            ContentTransitions="{x:Null}"
                            CheckSelectingBrush="{x:Null}"
                            DragForeground="{x:Null}"
                            DragBackground="{x:Null}"
                            FocusBorderBrush="Blue"
                            Margin="0, 0, 0, 0"
                            ContentMargin="3"
                            PlaceholderBackground="{x:Null}"
                            PointerOverBackground="blue"
                            SelectedPointerOverBorderBrush="Red"
                            SelectionCheckMarkVisualEnabled="False"
                            SelectedForeground="{x:Null}"
                            
                            SelectedBorderThickness="2"
                            
                            VerticalContentAlignment="Center"
                            IsHoldingEnabled="True"
                            IsDoubleTapEnabled="False"
                            IsRightTapEnabled="True"
                            IsTapEnabled="True"/>
                                    
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>

    But this style setter doesn't seem to work...and when i click on the item , not even the default blue coloured border appear which appears for my other gridviews...

    All i want is border color to appear around an item..when i click on that item ( person's image + name)...

    Help is appreciated..

    Thanks and Regards

    Abhinav Duggal




    Wednesday, May 28, 2014 12:11 PM

Answers

  • That looks like it should work. Remember that most of the items may be covered by the ItemTemplate.

    Following your original plan of updating the GridViewItemPresenter properties I generated the following which works as I'd expect, including for the selection states. For demonstration purposes ugly colours are hardcoded to several brushes.

            <Style x:Key="GridViewItemStyle1" TargetType="GridViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="TabNavigation" Value="Local"/>
                <Setter Property="IsHoldingEnabled" Value="True"/>
                <Setter Property="Margin" Value="0,0,2,2"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridViewItem">
                            <GridViewItemPresenter 
                                 CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" 
                                CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
                                ContentMargin="4" 
                                ContentTransitions="{TemplateBinding ContentTransitions}" 
                                CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" 
                                DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                                DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                                DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                                DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                                FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Padding="{TemplateBinding Padding}" 
                                PointerOverBackgroundMargin="1" 
                                PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                                PointerOverBackground="Red" 
                                ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                                SelectedPointerOverBorderBrush="Cyan" 
                                SelectionCheckMarkVisualEnabled="True" 
                                SelectedForeground="Purple"
                                SelectedPointerOverBackground="Green" 
                                SelectedBorderThickness="5" 
                                SelectedBackground="Orange" 
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


    Friday, May 30, 2014 1:07 AM
    Owner

All replies

  • What language are you using so we can help you find the appropriate forum?

    The UI design forum is for discussion of what the app should look like, not how to implement that in specific languages and UI kits.

    Wednesday, May 28, 2014 12:41 PM
    Owner
  • Question updated.
    Wednesday, May 28, 2014 2:32 PM
  • This post is still off topic for the forum and you  haven't provided enough information to identify the proper forum for your question. Please let us know what language you are using so we can get you to an appropriate forum.
    Wednesday, May 28, 2014 2:37 PM
    Owner
  • I'm using XAML for UI design and C# as backend and code-behind..

    (PS: i had updated the subject of the post in accordance with your earlier reply..)

    Wednesday, May 28, 2014 2:45 PM
  • Instead of creating the template from scratch copy the existing one and then modify it as needed. Right click on your GridView and select Edit Additional Templates.Edit Generated Item Container (ItemContainerStyle)...

    Find the properties you want to update and edit just those. Don't hardcode colours such as Red and Blue. Even if you use custom colours normally, you want to pull them from ThemeResources so they can fall back to defaults in high contrast modes.

    --Rob

    Thursday, May 29, 2014 12:04 AM
    Owner
  • Hi, thanks i tried it, also point taken for using hardcoded colours ( was just testing, i intend to use themeresource colours)...

    Now, it seems to work for all common states...but not for selection states for a gridview item:


    this is the code i used..

    <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="GridViewItem">
                                    <Border x:Name="RootElement" IsRightTapEnabled="False">

                                        <VisualStateManager.VisualStateGroups>

                                            <!--Define the states for the common states.
                                                The states in the VisualStateGroup are mutually exclusive to
                                                each other.-->
                                            <!--<VisualStateGroup x:Name="CommonStates">

                                                --><!--The Normal state is the state the button is in
                                                    when it is not in another state from this VisualStateGroup.--><!--
                                                <VisualState x:Name="Normal" />

                                                --><!--Change the SolidColorBrush, BorderBrush, to red when the
                                                    Pointer is over the button.--><!--
                                                <VisualState x:Name="PointerOver">
                                                    <Storyboard>
                                                        --><!--<ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                                        Storyboard.TargetProperty="Color" To="Green" />--><!--

                                                    </Storyboard>

                                                </VisualState>

                                                --><!--Change the SolidColorBrush, BorderBrush, to Transparent when the
                                                    button is pressed.--><!--
                                                <VisualState x:Name="Pressed">
                                                    --><!--<Storyboard >
                                                        <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                                        Storyboard.TargetProperty="Color" To="Blue"/>
                                                    </Storyboard>--><!--
                                                </VisualState>
                                                --><!--The Disabled state is omitted for brevity.--><!--
                                            </VisualStateGroup>-->
                                            <VisualStateGroup x:Name="SelectionStates">
                                                <VisualState x:Name="Unselected">
                                                <Storyboard>
                                                <ColorAnimation Duration="0" To="#FF000805" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="RootElement" d:IsOptimized="True"/>
                                                </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Selected">
                                                    <Storyboard>
                                                        <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                                        Storyboard.TargetProperty="Color" To="Green" />
                                                        <ColorAnimation Duration="0" To="#FF5B1717" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="RootElement" d:IsOptimized="True"/>

                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Selecting">
                                                    <Storyboard>
                                                        <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                                        Storyboard.TargetProperty="Color" To="Green" />

                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="SelectedUnfocused">
                                                    <Storyboard>
                                                        <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                                        Storyboard.TargetProperty="Color" To="Green" />
                                                        <ColorAnimation  Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Color" To="Green"/>

                                                    </Storyboard>
                                                    
                                                </VisualState>
                                            </VisualStateGroup>

                                        </VisualStateManager.VisualStateGroups>
                                        


                                        <Border.Background>
                                            <SolidColorBrush x:Name="BorderBrush" Color="White"/>
                                        </Border.Background>

                                        <Grid Background="{TemplateBinding Background}" Margin="4">
                                            <ContentPresenter
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                Margin="4,5,4,4" />
                                        </Grid>


                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>

    Any ideas on this...?

    Thursday, May 29, 2014 7:17 AM
  • That looks like it should work. Remember that most of the items may be covered by the ItemTemplate.

    Following your original plan of updating the GridViewItemPresenter properties I generated the following which works as I'd expect, including for the selection states. For demonstration purposes ugly colours are hardcoded to several brushes.

            <Style x:Key="GridViewItemStyle1" TargetType="GridViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="TabNavigation" Value="Local"/>
                <Setter Property="IsHoldingEnabled" Value="True"/>
                <Setter Property="Margin" Value="0,0,2,2"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridViewItem">
                            <GridViewItemPresenter 
                                 CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" 
                                CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
                                ContentMargin="4" 
                                ContentTransitions="{TemplateBinding ContentTransitions}" 
                                CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" 
                                DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                                DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                                DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                                DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                                FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Padding="{TemplateBinding Padding}" 
                                PointerOverBackgroundMargin="1" 
                                PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                                PointerOverBackground="Red" 
                                ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                                SelectedPointerOverBorderBrush="Cyan" 
                                SelectionCheckMarkVisualEnabled="True" 
                                SelectedForeground="Purple"
                                SelectedPointerOverBackground="Green" 
                                SelectedBorderThickness="5" 
                                SelectedBackground="Orange" 
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


    Friday, May 30, 2014 1:07 AM
    Owner