wpf overlay an image to a mediaelement

Question

I would show over a mediaelement, a classic image play and when the pointer enter on the mediaelement this image disappears. The mediaelement is like this and this works well. I post a portion of code:

 <toolkit:DataGrid.RowDetailsTemplate>
                <DataTemplate x:Name="DataTemplateDgRows">
                    <Border HorizontalAlignment="Stretch" CornerRadius="5" Background="Black" Margin="5"   Padding="5">
                        <StackPanel Orientation="Vertical">
                            <TextBlock Foreground="#509CD5" FontSize="20" Width="300" TextWrapping="Wrap"  Text="{Binding NomeV}"/>
                            <Border BorderThickness="2" CornerRadius="2" BorderBrush="LightGray" >
                                <MediaElement Source="{Binding MediaUri}"
                                              LoadedBehavior="Manual" Name="mediaElement1" ScrubbingEnabled="True"
                                              Width="360"  MouseLeftButtonDown="mediaElement1_MouseLeftButtonDown"
                                              MouseEnter="mediaElement1_MouseEnter"
                                              MouseLeave="mediaElement1_MouseLeave"
                                              Loaded="mediaElement1_Loaded" />


                            </Border>

May someone can help me? thanks

score 0 · Accepted Answer · answered Nov 01 '10 at 12:15

Something like this will get you started.

<toolkit:DataGrid.RowDetailsTemplate>
    <DataTemplate x:Name="DataTemplateDgRows">
        <Border HorizontalAlignment="Stretch" CornerRadius="5" Background="Black" Margin="5"   Padding="5">
            <StackPanel Orientation="Vertical">
                <TextBlock Foreground="#509CD5" FontSize="20" Width="300" TextWrapping="Wrap"  Text="{Binding NomeV}"/>
                <Border BorderThickness="2" CornerRadius="2" BorderBrush="LightGray" >
                    <Grid>
                        <Image Grid.ZIndex="1"
                               x:Name="image1"
                               Source="YourSource"/>
                        <MediaElement Grid.ZIndex="0"
                                      Source="{Binding MediaUri}" 
                                      LoadedBehavior="Manual" Name="mediaElement1" ScrubbingEnabled="True" 
                                      Width="360"  MouseLeftButtonDown="mediaElement1_MouseLeftButtonDown" 
                                      MouseEnter="mediaElement1_MouseEnter" 
                                      MouseLeave="mediaElement1_MouseLeave" 
                                      Loaded="mediaElement1_Loaded" />
                    </Grid>
                </Border>
            </StackPanel>
        </Border>
        <DataTemplate.Triggers>
            <Trigger SourceName="mediaElement1" Property="IsMouseOver" Value="True">
                <Setter TargetName="image1" Property="Visibility" Value="Collapsed"/>
            </Trigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</DataGrid.RowDetailsTemplate>

wpf overlay an image to a mediaelement

1 Answers1