WPF Path Command - wpf

So I have successfully implemented a button click with a custom background. Here is the xaml:
<Button
HorizontalAlignment="Left"
Grid.Row="0"
Grid.Column="0"
Command="{Binding PreferencesClickedCmd}"
>
<Path
Data="..."
Stretch="Uniform"
Fill="#FF070707"
Width="16"
Height="16"
Margin="0,0,0,0"
RenderTransformOrigin="0.5,0.5"
>
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Button>
Now, is there a way to implement a click command with MVVM on Path object itself. What I am looking for to have only an icon portion to be clickable (with no help of button object). With button, the entire generated background rectangle can be clicked in order to trigger an event for the Path.

If you want only the filled Path area to be clickable, this will work (just swap in your own Path, transform, etc. stuff):
<Button
Command="{Binding PreferencesClickedCmd}"
>
<Button.Content>
<Path Data="M 8,0 L 0,16 L 16,0 Z" Fill="SlateBlue" />
</Button.Content>
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter />
</ControlTemplate>
</Button.Template>
</Button>
The entire visual presentation of the button is replaced by just the content alone, and the parts of the button that aren't filled by the path are not clickable because they're transparent.
If you want the whole thing to be clickable, just give the template a background that's not quite transparent:
<ControlTemplate TargetType="Button">
<Grid Background="#01ffffff">
<ContentPresenter />
</Grid>
</ControlTemplate>
This is the MVVM Way of Doing Things: Button provides a Click event, and Command property, and some visual stuff; if all you want is the Click event and the Command Property, don't roll your own click event; use those parts of the Button while discarding the visual stuff.

As per Brandley suggestion, here is how I managed to implement it with minimal coding changes. I set the button size to match icon size, set the background to transparent and border width to 0:
<Button HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" Width="30" Height="30" BorderThickness="0" Background="Transparent" Command="{Binding PreferencesClickedCmd}">
<Path Data="..." Stretch="Uniform" Fill="#FF070707" Width="16" Height="16" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Button>

Related

How to add a border rectangle around image control in wpf?

I tried to add the wrapped the <Image with <border
I added
<Border BorderThickness="1">
And
</Border>
Then tried to wrapped the <Image like this :
<Border BorderThickness="1">
<Image x:Name="Img" HorizontalAlignment="Left" Height="233" Margin="467,54,0,0" VerticalAlignment="Top" Width="272" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="0.704"/>
<RotateTransform/>
<TranslateTransform Y="0.614"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Border>
But it does nothing when running the application.
In the designer on the main window I have a StackPanel and then on it the other controls also Image control.
I want to show the user that there is a Image control like pictureBox the problem is when running the program and the Image is still empty there is nothing that indicate that there is a Image control. That's why I want to draw a rectangle on the Image borders.
You need to pick a brush for your Border.
<Border BorderThickness="1" BorderBrush="Black">
<Image x:Name="Img" HorizontalAlignment="Left" Height="233" Margin="467,54,0,0" VerticalAlignment="Top" Width="272" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="0.704"/>
<RotateTransform/>
<TranslateTransform Y="0.614"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Border>
Actually, the method you applied is very close, since the picture will be in a border, it would be more logical to resize the border instead of resizing the picture. If you make an application like below, it will work for you.
<Border BorderThickness="2"
BorderBrush="Black"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="128"
Width="128">
<Image HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Stretch="Fill"
Source="/Images/antenna.png"/>
</Border>
It will be enough to have something like this in your application.
<Border BorderThickness="3" BorderBrush="Red" Height="233" Width="272">
<Image x:Name="Img" HorizontalAlignment="Left" Margin="467,54,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="0.704"/>
<RotateTransform/>
<TranslateTransform Y="0.614"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Border>

Set the ContentPresenter's content color, when the content is not a text

Let's say that My ContentPresenter contains a Viewbox with Paths inside instead of some text, how do I change the Color of those Paths from the Content Presenter
Example
I have this ResourceDictionary :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox>
<Grid>
<Grid Name="backgroundGrid" Width="48" Height="48" Visibility="Collapsed" />
<Path Data="M19.833,0L32.5,0 32.5,19.833999 52.334,19.833999 52.334,32.500999 32.5,32.500999 32.5,52.333 19.833,52.333 19.833,32.500999 0,32.500999 0,19.833999 19.833,19.833999z"
Stretch="Uniform"
Fill="?????"
Width="26" Height="26" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</ResourceDictionary>
and I have the ContentPresenter in a ControlTemplate of let's say a Button:
<ControlTemplate TargetType="{x:Type local:IconButton}">
<Border>
<Grid>
<ContentPresenter x:Name="ContentPresenterIcon" ContentSource="Icon"/>
</Grid>
</Border>
...
Assigning Icon to the ContentSource property just means that the ContentPresenter is having that Viewbox as a content.
What should I put in the Fill property of the Path Element, and which property should I change in the ContentPresenter to make its value propagate to the Fill property ?
Hope I was clear.
Update :
I desperately tried to set the ContentPresenter's TextElement.Foreground property and "Relativesource" bind the Path's Fill property to it, but that predictably didn't work.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox>
<Grid>
<Grid Name="backgroundGrid" Width="48" Height="48" Visibility="Collapsed" />
<Path Data="M19.833,0L32.5,0 32.5,19.833999 52.334,19.833999 52.334,32.500999 32.5,32.500999 32.5,52.333 19.833,52.333 19.833,32.500999 0,32.500999 0,19.833999 19.833,19.833999z"
Stretch="Uniform"
Fill="{Binding Path=TextElement.Foreground, RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}"
Width="26" Height="26" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
<ControlTemplate TargetType="{x:Type local:IconButton}">
<Border>
<Grid>
<ContentPresenter x:Name="ContentPresenterIcon" TextElement.Foreground="Red" ContentSource="Icon"/>
</Grid>
</Border>
...
Your second attempt should have worked. The reason it didn't is because you are binding to an Attached Property.
Attached property binding requires special syntax. The output window in visual studio probably tells you that the path could not be found. This should work:
Fill="{Binding Path=(TextElement.Foreground), RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}"
The only change is the parenthesis around the Path string. For more information, see WPF Attached Property Data Binding.

xaml TranslateTransform.X binding to value

I'm relatively new to some of Xaml features..
I'm trying to implement this progressbar with an arrow on top that shows the progress indicator in addition to the filled bar. I used polygon to display the arrow and just need to translate it in X direction to display it on top of the progrssBar. However, the binding applied below .
Binding PlaybackProgressTip
which is a double is causing the code to crash. Can someone please tell me how to bind the TranslateTransform.X to the double value or I need to do something else?
<Grid x:Name="grid" VerticalAlignment="Top" Margin="0,34,0,0" Grid.Row="1" Height="18" d:LayoutOverrides="VerticalAlignment, Width, VerticalMargin">
<ProgressBar x:Name="Progress" Maximum="1" Value="{Binding PlaybackProgress}" VerticalAlignment="Center" Background="LightGray" Height="6" Visibility="Collapsed" IsIndeterminate="False" Foreground="DarkBlue"/>
<Image x:Name="ProgressComplete" Source="/Images/checkbox.png" Height="18" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="Collapsed" Stretch="Uniform"/>
<Polygon Points="0,0 8,0, 4,5" Stroke="Black" Fill="Black" Margin="0,-2,0,0">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ProgressPositionTranslate" X="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PlaybackProgressTip}" />
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Grid>

Expander button on the right side: how to do it?

i want to position the Expander button on the right side of the label. How to do this?
You can also set the FlowDirection to RightToLeft, but that may cause other problems. For example it also changes the flow direction for the content of the expander so you may need to set it back.
<Expander FlowDirection="RightToLeft">
<StackPanel FlowDirection="LeftToRight">
</StackPanel>
</Expander>
You must restyle the control's template. Here's an example: http://patconroy.wordpress.com/2008/12/18/restyling-the-wpf-expander-control/
Another way to approach this is to position the expander where you like, without any header or content in the expander itself.
Then bind the visibility of your content-control to the expanders IsExpanded property, using a BooleanToVisibilityConverter.
<StackPanel>
<StackPanel.Resources>
<BooleanToVisibilityConverter x:Key="boolToVisibility" />
</StackPanel.Resources>
<DockPanel>
<Expander DockPanel.Dock="Right" x:Name="rightAlignedExpander" />
<TextBlock Text="Expanders header" VerticalAlignment="Center" />
</DockPanel>
<Grid Visibility="{Binding IsExpanded, ElementName=rightAlignedExpander, Converter={StaticResource boolToVisibility}}">
<TextBlock Text="Expanders content"/>
</Grid>
</StackPanel>
The downside is that it will not expand when the header is clicked, but that could easily be implemented if necessary.
Personally I think this is more simple and straightforward instead of completely restyling the control's template. It also have the added benefit that it will keep any styles already applied to the expander, for example when using 3rd party themes like DevExpress or Telerik.
You can use tranform commands to flip the Controls
<Expander RenderTransformOrigin="0.5,0.5">
<Expander.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1" />
<SkewTransform AngleY="0" AngleX="0" />
<RotateTransform Angle="0" />
<TranslateTransform />
</TransformGroup>
</Expander.RenderTransform>
<Expander.Header>
<Grid RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1" />
<SkewTransform AngleY="0" AngleX="0" />
<RotateTransform Angle="0" />
<TranslateTransform />
</TransformGroup>
</Grid.RenderTransform>
<TextBlock>Text</TextBlock>
</Grid>
</Expander.Header>
<Grid Height="100" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1" />
<SkewTransform AngleY="0" AngleX="0" />
<RotateTransform Angle="0" />
<TranslateTransform />
</TransformGroup>
</Grid.RenderTransform>
<TextBlock>Text</TextBlock>
</Grid>
</Expander>

how "Stretch" property of Image in WPF Effects Transform?

how "Stretch" property of Image in WPF effects Transforms ?
I found that Stretch property of image effets the transforms applied to it.
When stretch=fill, then everything is fine but if stretch=uniform, the transforms are chaged.
I not getting why this happening. Plz explain.
CODE:
<Canvas Height="200" Width="200">
<Image Height="50" Width="50" RenderTransformOrigin="0.5,0.5" Source="Image.jpg" Stretch="Fill">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform Angle="200" />
<TranslateTransform X="100" Y="100"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Rectangle Height="50" Width="50" RenderTransformOrigin="0.5,0.5" Fill="RoyalBlue" Opacity="0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="200" />
<TranslateTransform X="100" Y="100"/>
</TransformGroup>
</Image.RenderTransform>
</Rectangle>
</Canvas>
<Canvas Height="200" Width="200">
<Image Height="50" Width="50" RenderTransformOrigin="0.5,0.5" Source="Image.jpg" Stretch="Uniform">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform Angle="200" />
<TranslateTransform X="100" Y="100"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Rectangle Height="50" Width="50" RenderTransformOrigin="0.5,0.5" Fill="RoyalBlue" Opacity="0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="200" />
<TranslateTransform X="100" Y="100"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
From my testing, it appears that this is just a bug in the way the Visual Studio designer previews this XAML.
I've taken your code and loaded it in both Visual Studio 2010 and in Expression Blend 4. In Visual Studio's designer, I see what you're talking about. In Expression Blend, the preview is correct.
Most importantly, when I run the application, it is rendered correctly. So I think you're ok. Just pretend like its not doing that or use Expression Blend when you have to work with this control.

Resources