1

I have an ItemesView with binding collection. I styled the DataTemplate for it with root element ItermContainer, but at attempt to provide some VisualState for it it just doesn't work. How to make DataTemplate react on interactions like: MouseOver(PointOver) or Pressed?

I've also tried to provide it with ItemContaienr.Triggers but all of them for some reasons lead to exception in attempt to launch application.

Here is my code which I tried to use:

<ItemsView Grid.Row="1" SelectionMode="Single" Margin="0,10,0,0"
       ItemsSource="{Binding Items, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" >
<i:Interaction.Behaviors>
    <i:EventTriggerBehavior EventName="Loaded">
        <i:InvokeCommandAction Command="{Binding LoadedCommand}"/>
    </i:EventTriggerBehavior>
</i:Interaction.Behaviors>
<ItemsView.Layout>
    <LinedFlowLayout ItemsStretch="Fill" LineSpacing="5" MinItemSpacing="5"/>
</ItemsView.Layout>
<ItemsView.ItemTemplate>
    <DataTemplate x:DataType="vm:CourseContainerViewModel">
        <ItemContainer HorizontalContentAlignment="Center" VerticalContentAlignment="Center" CornerRadius="10">
            <Border Background="{StaticResource ButtonBackgroundThemeBrush}">
                <Grid x:Name="RootElement">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Border Grid.Row="0" Width="150" Height="150" CornerRadius="10">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Color="#ff1b6b" Offset="0.0" />
                                <GradientStop Color="#45caff" Offset="1.0" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <Viewbox Grid.Row="0" Width="80">
                            <SymbolIcon Symbol="Pictures" Opacity="0.6"/>
                        </Viewbox>
                    </Border>
                    <TextBlock Grid.Row="1" HorizontalAlignment="Left" TextAlignment="Center" Margin="3,6,0,6" 
                               FontWeight="Medium" Opacity="1" FontSize="14" Foreground="#fff"
                               Text="{Binding Name, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>

                    <Button x:Name="CourseMenuButton" Background="Transparent" BorderBrush="Transparent" 
                            Visibility="Collapsed"
                            VerticalAlignment="Top" HorizontalAlignment="Right" Margin="5" Padding="3">
                        <SymbolIcon Symbol="More"/>
                        <Button.Flyout>
                            <MenuFlyout Placement="BottomEdgeAlignedLeft">
                                <MenuFlyoutItem Text="Delete"/>
                            </MenuFlyout>
                        </Button.Flyout>
                    </Button>
                </Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="PointerOver">
                            <VisualState.Setters>
                                <Setter Target="CourseMenuButton.Visibility" Value="Visible"/>
                                <Setter Target="RootElement.Background" Value="Red"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Target="CourseMenuButton.Visibility" Value="Visible"/>
                                <Setter Target="RootElement.Background" Value="Red"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Target="CourseMenuButton.Visibility" Value="Visible"/>
                                <Setter Target="RootElement.Background" Value="Red"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Border>
        </ItemContainer>
    </DataTemplate>
</ItemsView.ItemTemplate>
2
  • You could try to use VisualStateManager within your DataTemplate. And then control authors or app developers transition between these states by calling the static GoToState method of VisualStateManager. Could you please provide a minimum sample to help us reproduce the issue? Commented Mar 10 at 6:46
  • I'm not sure if you can do this. It might be easier to create a custom control. Commented Mar 11 at 2:07

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.