locked
Color inversion effect in windows 8 xaml RRS feed

  • Question

  • Hi ,

    I am trying to implement some visual feedback for my application and for most of the items i have chosen color inversion effect.

    I am using visual state groups and different story boards and for usual buttons i can make that happen with no problem but whenever i have several grids and borders i am lost. I cannot see the effect and i don t understand why.

    Here is my data template from the resource dictionary:


    <DataTemplate x:Key="CategoryItemTemplate">
            <Grid Width="250" Height="43" HorizontalAlignment="Center" >
                    <Grid Width="225" Height="35" HorizontalAlignment="Left" VerticalAlignment="Top">
                        <Image Source="/Assets/SlabShadow.png" Stretch="None" Margin="0 0 -7 -5" VerticalAlignment="Bottom" HorizontalAlignment="Right" Opacity=".5"/>
                        <Grid>
                            <Rectangle Fill="White" Margin="0 0 0 3" />
                            <Grid>
                                <Image Stretch="None" Source="{Binding Model.Slab}" HorizontalAlignment="Left" Margin="-1 -3 0 0"/>
                            </Grid>
                            <Grid Grid.Column="1" Margin="0 0 10 10">
                                <TextBlock Text="{Binding Model.Title}" Foreground="{StaticResource WinkBrown}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="18.667" FontFamily="{StaticResource Rockwell}" Margin="45 0 0 0" />
                            </Grid>
                        </Grid>
                    </Grid>
              
            </Grid>
    
        </DataTemplate>

    So lets say i want to change the background  color for the outside grid (last one) when the user clicks on it.

    How can i achieve this?

    Thank you!





    Wednesday, January 22, 2014 11:43 AM

All replies

  • Hi,

    I do not quite understand what you mean. Which scenario do you want to achieve. You can upload your project into skyDrive. So that we can know why the background effect cannot happen in the Grid.

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, January 23, 2014 6:37 AM
  • To be more specific this is the scenario:

    I have a grid with a listview inside displaying some categories.

    I need that when i press one of the categories to change the color of the text or grid so ithe user will have a visual feedback that the action was done.

     <Grid Grid.Column="1" Margin="0 20 0 0"  HorizontalAlignment="Left">
                                <ListView ItemsSource="{Binding SubCategories, Mode=OneWay}"  VerticalAlignment="Top" HorizontalAlignment="Left"
                              ItemTemplateSelector="{StaticResource categoryTemplate}" IsZoomedInView="True"
                              SelectedItem="{Binding SelectedSubCategory, Mode=TwoWay}" ItemContainerStyle="{StaticResource SlabListViewItemStyle}"
                                SizeChanged="ListView_SizeChanged_1" PointerEntered="categoriesPointerEntered" PointerExited="categoriesPointerExited">
                                    <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>
                        </ListView>
                    </Grid>



    <DataTemplate x:Key="CategoryItemTemplate">
            <Grid Width="250" Height="43" HorizontalAlignment="Center" >
                    <Grid Width="225" Height="35" HorizontalAlignment="Left" VerticalAlignment="Top">
                        <Image Source="/Assets/SlabShadow.png" Stretch="None" Margin="0 0 -7 -5" VerticalAlignment="Bottom" HorizontalAlignment="Right" Opacity=".5"/>
                        <Grid>
                            <Rectangle Fill="White" Margin="0 0 0 3" />
                            <Grid>
                                <Image Stretch="None" Source="{Binding Model.Slab}" HorizontalAlignment="Left" Margin="-1 -3 0 0"/>
                            </Grid>
                            <Grid Grid.Column="1" Margin="0 0 10 10">
                                <TextBlockx:Name="Category" Text="{Binding Model.Title}" Foreground="{StaticResource WinkBrown}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="18.667" FontFamily="{StaticResource Rockwell}" Margin="45 0 0 0" />
                            </Grid>
                        </Grid>
                    </Grid>
              
            </Grid>
        </DataTemplate>


    So i have my xaml page with the listview and the data template  taken from a resource dictionary

    What i want is that if i press one of the items from the listview to change the foreground for "Category" textblock.

    Thank you!


    Thursday, January 23, 2014 9:06 AM