Develop Reference

Display icon over select images in wpf listbox

I've looked at some related answers (Content of a Button Style appears only in one Button instance, and Images only showing in last ListBoxItem), but can't seem to get their answers to work in my example.
My app wpf stack is relatively complex.
I've a UserControl within another window. Within the UserControl, I've a ListBox with nested elements ListBox.ItemTemplate > DataTemplate > Border > Grid > StackPanel
Within the StackPanel is a TextBlock, followed by an Image and a StackPanel.ToolTip
I'm wanting to place an icon over the Image, so I've further obfuscated the image by putting it in a Grid, and adding a ViewBox accessed via a Control Template (as suggested in the above links), so that the ViewBox is centered on the image. Here's the Grid:
<Grid>
<Image RenderOptions.BitmapScalingMode="HighQuality"
Height="{Binding ElementName=_this, Path=ThumbSize.Height}"
>
<gif:ImageBehavior.AnimatedSource>
<MultiBinding Converter="{c:ImageConverter}">
<Binding Path="ThumbLocation" />
<Binding Path="FullName" />
</MultiBinding>
</gif:ImageBehavior.AnimatedSource>
</Image>
<Control Template="{StaticResource PlaySymbol}" Visibility="{Binding PlayVisible}" />
</Grid>
The ViewBox's ControlTemplate is in the UserControl.Resources up at the top
<ControlTemplate x:Key="PlaySymbol" TargetType="{x:Type Control}">
<Viewbox Stretch="Uniform"
RenderTransformOrigin="0.5,0.5"
Opacity="0.75"
x:Shared="False"
>
<Viewbox.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
</TransformGroup>
</Viewbox.RenderTransform>
<ContentControl Content="{StaticResource appbar_control_play}" />
</Viewbox>
</ControlTemplate>
The appbar_control_play is in the Resources directory in an Icons.xaml file.
<Canvas x:Key="appbar_control_play" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="20.5832" Height="31.6667" Canvas.Left="30.0833" Canvas.Top="22.1667" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>
</Canvas>
The goal is to only display the icon for 'play' on movies. I've set the PlayVisible to return the proper visibility for movies, and not for other files. Yet, it is only displaying for the last movie. I've heard that this is the case for controls only able to have one parent. I've tried setting x:Shared="False" on the ViewBox, but to no avail.
The app works, but I've recently decided to add movies to the listing and want to display the play icon over their thumbnails, but not the other items. It seems simple on the outset, but I've yet to figure out what is needed.
Any help would be appreciated, otherwise I feel I may have to resort to overlaying the icon on the actual thumbnails of the movies.

It looks like the problem is not related to the Viewbox but the image resource appbar_control_play it references.
There is no need to add the Viewbox via a Control. Just add it directly to the DataTemplate.
Generally prefer a ContentControl over a templated Control if you wish to display content.
The x:Shared attribute is only required on a UIElement that is not part of a template but defined in a ResourceDictionary. For example, when you define the Viewbox in as a resource, you must set the x:Shared attribute to false. Otherwise it is only allowed to appear once in the visual tree.
In case the image resource is an image file, a proper DataTemplate could look as followed:
<DataTemplate>
<StackPanel>
<Grid>
<Image Source="path to image" />
<Image Source="path to overlay icon"
Stretch="UniformToFill"
Width="50"
Height="50" />
</Grid>
</StackPanel>
</DataTemplate>
In case the icon is a XAML resource like a Geometry or a Segoe MDL2 Assets font icon, the DataTemplate should look as followed:
App.xaml
<Application.Resources>
<Viewbox x:Key="PlayIcon" x:Shared="False">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text="" />
</Viewbox>
<Viewbox x:Key="appbar_control_play"
x:Shared="False">
<Path Width="20.5832"
Height="31.6667"
Stretch="Fill"
Fill="{Binding RelativeSource={RelativeSource AncestroType=ContentControl}, Path=For4ground}"
Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z " />
</Viewbox>
</Application.Resources>
MyControl.xaml
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<Image Source="path to image" />
<ContentControl Content="{StaticResource appbar_control_play}"
Width="50"
Height="50"
Foreground="Pink" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

Not sure what's happening on your side but the following just works:
<Window x:Class="abc.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:system="clr-namespace:System;assembly=System.Runtime"
mc:Ignorable="d"
Title="Window1">
<Grid>
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</DataTemplate.Resources>
<Border Width="64" Height="64" BorderBrush="Red" BorderThickness="1">
<Grid>
<TextBlock Text="{Binding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<Rectangle Fill="DeepSkyBlue"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="2"
Width="16"
Height="16"
Visibility="{Binding Converter={StaticResource BooleanToVisibilityConverter}}"
x:Name="Button" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<system:Boolean>True</system:Boolean>
<system:Boolean>False</system:Boolean>
<system:Boolean>True</system:Boolean>
<system:Boolean>False</system:Boolean>
<system:Boolean>True</system:Boolean>
<system:Boolean>False</system:Boolean>
</ListBox>
</Grid>
</Window>

making a Question mark in WPF

I am using the expression Blender 2010 draw in WPF and I am trying to make a question mark. This is what I have so far and it looks bad:
<ed:Arc Canvas.Left="33" Width="28" Height="24" Canvas.Top="22" ArcThickness="6" StartAngle="-45" EndAngle="140" Stretch="None" Fill ="Red" />
<ed:Arc Canvas.Left="45" Width="28" Height="26" Canvas.Top="37" ArcThickness="6" StartAngle="90" EndAngle="180" Stretch="None" Fill ="Red" RenderTransformOrigin="0.498,0.458" >
<ed:Arc.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-179.625"/>
<TranslateTransform X="0.104" Y="1.427"/>
</TransformGroup>
</ed:Arc.RenderTransform>
</ed:Arc>
<Rectangle Canvas.Left="46" Canvas.Top="46" Width="6" Height="19" Stretch="Fill" Fill="Red" />
<Ellipse Canvas.Left="46" Width="6" Height="6" Canvas.Bottom="20" Fill="Red" Canvas.Top="70" RenderTransformOrigin="-0.477,-0.363" />
[enter image description here][1]
Updated: I just tried this :
<Path x:Name="Information" Canvas.Left="25" Canvas.Top="25" Stretch="Fill" Width="50" Height="50" Data="M9,89a81,81 0 1,1 0,2zm51-14c0-13 1-19 8-26c7-9 18-10 28-8c10,2 22,12 22,26c0,14-11,19-15,22c-3,3-5,6-5,9v22m0,12v16">
<Path.Fill>
<SolidColorBrush Color="Lime"/>
</Path.Fill>
</Path>
but it still look bad really bad[enter image description here][2]
please see up picture.
I got the information for the Sgv from
https://commons.m.wikimedia.org/wiki/Category:SVG_Question_marks
[1]: https://i.stack.imgur.com/A9X6A.png
[2]: https://i.stack.imgur.com/HKY6e.png

Looks like you are wanting to set up using paths in your WPF project.
Here is one example of doing this. There are many.
You can get your paths for example from Material Designs just click on an icon and then look at the SVG or XAML canvas where they have the Path.Data information.
For example below I have copied the data for a question mark and added it to a Viewbox. These ViewBox elements you can have in your Window.Resources or in a Resource file.
<Viewbox x:Key="questionMark">
<Canvas Width="512"
Height="512">
<Canvas.RenderTransform>
<TranslateTransform X="0"
Y="0" />
</Canvas.RenderTransform>
<Canvas.Resources />
<Canvas>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Fill="Black"
Opacity="1.00">
<Path.Data>
<PathGeometry Figures="M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z"
FillRule="NonZero" />
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>
To Use it you just add a Grid;
<Grid Background="Yellow" Width="50" Height="50">
<Grid.OpacityMask>
<VisualBrush Visual="{StaticResource questionMark}" />
</Grid.OpacityMask>
</Grid>
Result looks like this;

How can I copy a Region of Interest into an image in WPF? [duplicate]

I want to show a specific area of an image in my WPF control.
Let's say the original image dimensions are 600x400 and I'm trying to show a rectangle inside that image, positioned on X=420,Y=330 with width=60, height=40.
So I tried to use ScaleTransform and calculate the scale factor as 10, and the RenderTransformOrigin to 0.75, 0.85.
But when I view the control I don't get the image I expected. (only the red rectangle).
The is the code:
<Grid>
<Button Width="600" Height="400">
<Button.Template>
<ControlTemplate>
<Grid ClipToBounds="True">
<Image Source="c:\temp\sample.bmp" Stretch="Uniform" RenderTransformOrigin="0.75, 0.85">
<Image.RenderTransform>
<ScaleTransform ScaleX="10" ScaleY="10" />
</Image.RenderTransform>
</Image>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
That the result:

You could use a CroppedBitmap:
<Image>
<Image.Source>
<CroppedBitmap Source="c:\temp\sample.bmp" SourceRect="420,330,60,40"/>
</Image.Source>
</Image>
Or you use an ImageBrush with an appropriate Viewbox:
<Grid>
<Grid.Background>
<ImageBrush ImageSource="c:\temp\sample.bmp"
ViewboxUnits="Absolute" Viewbox="420,330,60,40"/>
</Grid.Background>
</Grid>

How to move an image horozontally in UWP with C#?

I am transitioning from Windows forms to UWP, and as an exercise want to move an image across the screen. In Forms its easy using image.Left, but for the life of me I can't find a way in UWP.
I tried wrapping it in Canvas, as suggested elsewhere,
<Canvas
x:Name="cDog1"
Grid.Row="1"
Margin="29,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Image
x:Name="Dog1"
Canvas.Left="0"
Source="Assets/images/dog.png"
Stretch="None" />
</Canvas>
But still can't get back a Canvas.Left that can be changed.
In the materials I read they speak of a SetLeft, yet that isn't an option.
Solved!
<Canvas
x:Name="cDog1"
Grid.Row="1"
Margin="29,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Image
x:Name="Dog1"
Canvas.Left="0"
Source="Assets/images/dog.png"
Stretch="None" >
<Image.RenderTransform>
<TranslateTransform x:Name="MoveDog1" X="0" Y="0"/>
</Image.RenderTransform>
</Image>
</Canvas>
From https://social.msdn.microsoft.com/Forums/sqlserver/en-US/4ed8bbf8-5a63-4ef9-a9e5-ddcb310ed865/uwpchow-do-i-move-something-with-a-button-press?forum=wpdevelop

Canvas ImageSource not showing image

Here is my xaml:
<StackPanel Height="333">
<Canvas x:Name="imageCanvas"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased">
<Canvas.Background>
<ImageBrush x:Name="image1"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top">
</ImageBrush>
</Canvas.Background>
</Canvas>
<Canvas x:Name="overlayCanvas">
<Rectangle Name="dummyRectangle" Width="1" Height="2" Fill="Transparent" />
</Canvas>
</StackPanel>
Here is my C# code behind:
void PlayImages()
{
string testImageFolder = "C:\\TestImages";
DirectoryInfo d = new DirectoryInfo(testImageFolder);//Assuming Test is your Folder
FileInfo[] Files = d.GetFiles("*.tif"); //Getting Text files
image1.ImageSource = new BitmapImage(new Uri("C:\\TestImages\\ChanA_0001_0001_0001_0001.tif"));
}
However, when the C# code above executed, nothing happened on UI. I am wondering where should I change to make the image show up? Thanks.

It was the stack panel that causes the problem. I am not sure why, but if some of them are removed, then the image shows up. The xaml with some stack penal removed is like following:
<StackPanel HorizontalAlignment="Left">
<!--Controls:MenuControl/-->
<Controls:ToggleButtonControl Margin="0,0,0,0" Height="43" RenderTransformOrigin="0.5,-0.233" />
</StackPanel>
<Canvas x:Name="imageCanvas"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased" Margin="0,52,0,0">
<Canvas.Background>
<ImageBrush x:Name="image1"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top"
ImageSource="{Binding Path=Bitmap, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
</ImageBrush>
</Canvas.Background>
</Canvas>

Your imageCanvas always has width and height zero, because you neither add any children, not set its Width or Height explicitly.
Change your XAML to use only one Canvas instead, and optionally (depending on the outer container and the children to be added) set its Width and Height properties:
<Canvas x:Name="overlayCanvas" Height="333" Width="500">
<Canvas.Background>
<ImageBrush x:Name="image1" ... />
</Canvas.Background>
<Rectangle ... />
</Canvas>