I want to bottom align text in label.
The label is inside a viewbox.
I've tried to put VerticalAlignement And VerticalContentAlignement to Bottom on label but it doesn't seems to work.
I've also tried to put a width and height on the label but nothing fits to my needs.
Here is the xaml with the viewbox.
<Viewbox x:Name="vbCodeOnline" Grid.Column="0" HorizontalAlignment="Right" >
<Label d:Content="Test" x:Name="lblCodeOnline" Content="{Binding CodeOnline}" Foreground="{Binding CouleurAffichage, Converter={StaticResource ColorToBrushConverter}}" FontSize="36" MouseDown="lblCodeOnline_MouseDown" MouseEnter="lblCodeOnline_MouseEnter" MouseLeave="lblCodeOnline_MouseLeave" Cursor="Help"/>
</Viewbox>
Here is the full usercontrol xaml :
<UserControl x:Class="QuizzDllWpf.UserControl.OnlineView"
x:Name="MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:converters="clr-namespace:QuizzDllWpf.Converters"
mc:Ignorable="d" d:DesignHeight="40" d:DesignWidth="140"
SizeChanged="OnlineView_SizeChanged"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">
<UserControl.Resources>
<telerik:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
<telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<converters:BooleanHoverToCursorConverter x:Key="BooleanHoverToCursorConverter" />
<converters:TraductionConverter x:Key="TraductionConverter" />
<converters:CoefValueConverter x:Key="CoefValueConverter" />
<!--Images SVG-->
<PathGeometry x:Key="ImageSVGOnlineInactif" Figures="M55.08 96.53H15.22a3.86 3.86 0 0 0-3.73 4V170a3.86 3.86 0 0 0 3.73 4H55.08a3.87 3.87 0 0 0 3.74-4V100.5A3.87 3.87 0 0 0 55.08 96.53Zm-19.93 69a6 6 0 0 1 0-11.92 6 6 0 0 1 0 11.92Zm16.19-16.39H19V104.47H51.34Zm53.25-58.3V78.93a12.89 12.89 0 0 0-.5-4.3H46.16c-2.77 0-3.6.3-3.83.42 0 0-.07.37-.07 1.07v8.25H32.91V76.13c0-10.84 10-10.84 13.25-10.84h57a9.57 9.57 0 0 1 7.45 2.44c2.3 2.26 3.37 5.82 3.37 11.2v4.48A51.31 51.31 0 0 0 104.59 90.85Zm7.64 78.06c-1.74 2.7-5.19 5.07-11.93 5.07H67.19V168.9h0v-2.52a6.23 6.23 0 1 0 0-12.46v-6H94.41A51.28 51.28 0 0 0 112.23 168.91Zm77.67-55.42A50.66 50.66 0 0 0 180.55 95V50.49c0-8.72 0-15-1.17-17.27-.36-.69-1.29-1.43-7.79-1.43l-102-.49c-8.28 0-8.35 2.45-8.45 5.83L61 50.56l-9.35-.14.19-13.49c.29-10.1 6.12-15 17.83-15l102 .49c18.28 0 18.28 7.64 18.28 28.05ZM139.24 87.57A40.41 40.41 0 1 0 179.65 128 40.45 40.45 0 0 0 139.24 87.57Zm0 73.77a33.35 33.35 0 0 1-24.86-55.59L159 154.82A33.16 33.16 0 0 1 139.24 161.34ZM164.1 150.2l-44.64-49.07A33.34 33.34 0 0 1 164.1 150.2Z" FillRule="NonZero"/>
<PathGeometry x:Key="ImageSVGOnlineActif" Figures="M54.65 98.26H14.8a3.85 3.85 0 0 0-3.73 4v69.3a3.85 3.85 0 0 0 3.73 4H54.65a3.85 3.85 0 0 0 3.73-4v-69.3A3.85 3.85 0 0 0 54.65 98.26ZM34.72 167.07a5.95 5.95 0 1 1 5.61-5.94A5.78 5.78 0 0 1 34.72 167.07Zm16.19-16.34H18.54V106.18H50.91Zm62.57-70v83.51c0 3.38-1.33 11.26-13.63 11.26H66.75v-5.06h0v-2.51a6.22 6.22 0 1 0 0-12.43v-6h37.39V80.71a12.65 12.65 0 0 0-.51-4.28c-.24 0-.55 0-.79 0H45.73c-2.76 0-3.6.3-3.83.42 0 0-.07.37-.07 1.06v8.23H32.49V77.92c0-10.8 10-10.8 13.24-10.8h56.94a9.64 9.64 0 0 1 7.44 2.44C112.41 71.81 113.48 75.35 113.48 80.71Zm57.65-56.32L69.19 23.91c-11.7 0-17.53 4.86-17.82 14.93l-.19 13.45 9.34.14L60.72 39c.09-3.37.16-5.81 8.44-5.81l102 .49c6.49 0 7.42.73 7.79 1.42 1.17 2.24 1.17 8.53 1.17 17.22V111H123.56v47.77l0 9.13a6.81 6.81 0 0 0 6.81 6.8h21.81a6.81 6.81 0 0 0 6.81-6.8v-9.32a6.8 6.8 0 0 0-6.81-6.8h-4.09V133.12h20.64c13.69 0 20.63-5.35 20.63-15.9V52.36C189.41 32 189.41 24.39 171.13 24.39Zm-1.19 103.22a5.83 5.83 0 1 1 5.84-5.82A5.84 5.84 0 0 1 169.94 127.61Z" FillRule="NonZero"/>
</UserControl.Resources>
<Grid x:Name="myGrid" ToolTip="{Binding ToolTipOnline}" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--Affichage du code online-->
<Viewbox x:Name="vbCodeOnline" Grid.Column="0" HorizontalAlignment="Right" >
<Label d:Content="Test" x:Name="lblCodeOnline" Content="{Binding CodeOnline}" Foreground="{Binding CouleurAffichage, Converter={StaticResource ColorToBrushConverter}}" FontSize="36" MouseDown="lblCodeOnline_MouseDown" MouseEnter="lblCodeOnline_MouseEnter" MouseLeave="lblCodeOnline_MouseLeave" Cursor="Help"/>
</Viewbox>
<!--Affichage du bouton Online -->
<DockPanel x:Name="imageDockPanel" Width="{Binding ActualHeight, ElementName=MyUserControl, Converter={StaticResource CoefValueConverter}, ConverterParameter=1}" HorizontalAlignment="Right" Grid.Column="1" MouseDown="ImageDockPanel_MouseDown" Cursor="{Binding CursorHandOnline, Converter={StaticResource BooleanHoverToCursorConverter}}" Background="#01000000">
<Viewbox x:Name="vbImageOnline" Stretch="Uniform">
<!--Utilisation d'une image SVG (forme géométrique) dont on modifie la couleur de remplissage-->
<Path Fill="{Binding CouleurAffichage, Converter={StaticResource ColorToBrushConverter}}" Data="{Binding DataImageSVGOnline}" />
</Viewbox>
</DockPanel>
</Grid>
</UserControl>
Here is the current result :
The expected result :
Using the following, it does not work too
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--Affichage du code online-->
<Viewbox x:Name="vbCodeOnline" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Bottom" >
<Label d:Content="Test" x:Name="lblCodeOnline" Background="Yellow" VerticalContentAlignment="Bottom" Content="{Binding CodeOnline}" Foreground="{Binding CouleurAffichage, Converter={StaticResource ColorToBrushConverter}}" FontSize="36" MouseDown="lblCodeOnline_MouseDown" MouseEnter="lblCodeOnline_MouseEnter" MouseLeave="lblCodeOnline_MouseLeave" Cursor="Help"/>
</Viewbox>
Define the Width explicitly in your first <ColumnDefinition /> and set VerticalAlignment="Bottom" for the ViewBox (set its background color just for debugging then remove it).. You can set VerticalContentAlignment="Bottom" for the Label (color it as well, just for debugging) as well..
Related
<Image Stretch="UniformToFill" x:Name="itemPhoto" Width="120" Height="80" Source="/Resource/Image/gbricks.jpg">
<Image.ToolTip>
<ToolTip Placement="Bottom">
<ToolTip.Template>
<ControlTemplate>
<StackPanel Margin="30,0,30,0">
<Path Margin="34,0,0,0" Fill="#e5AAAAAA" Data="M 0 16 L 16 0 L 32 16 Z"/>
<Image x:Name="itemHoverPhoto" Height="500" Width="500" Source="/Resource/Image/gbricks.jpg"/>
</StackPanel>
</ControlTemplate>
</ToolTip.Template>
</ToolTip>
</Image.ToolTip>
</Image>
How to get child element (itemHoverPhoto) from Image.Tooltip
If you put this inside the OnApplyTemplate() of your window:
ToolTip toolTip = this.itemPhoto.ToolTip as ToolTip;
toolTip.ApplyTemplate();
var itemHoverPhoto = toolTip.Template.FindName("itemHoverPhoto", toolTip);
then you have the itemHoverPhoto, and can manipulate it as you wish
I would like to draw a left and right arrows like the following up and bottom arrows:
//up arrow
<Path Data="m 4 14 4 0 0 -9 3 0 -5 -5 -5 5 3 0 z"
Fill="#571CB61C"
Stroke="#FF00B400"
StrokeThickness="1" />
//bottom arrow
<Path Data="m 3.5 0 4 0 0 8 3 0 -5 5 -5 -5 3 0 z"
Fill="#571CB61C"
Stroke="#FF00B400"
StrokeThickness="1" />
Any help will be appreciated
Here is a way so you don't have to rely on anyone in the future
1) first download Inkscape then install it then go to flaticon.com.
2) second search for the icon that you like then download its svg format.
3) now, open the icon in Inkscape and after you select it.
4) go to the menu bar then Path -> Object to Path
5) then go to File -> Save As then change the save type to .xaml
all what you have to do now is copy the results from the .xaml file and paste it in your app.
here is a sample of my results using the following icons left arrow icon, right arrow icon
<!--thin left arrow-->
<Path Data="M 401.166 478.097 113.178 245.004 401.166 11.903 391.536 0 88.834 245.004 391.536 490 Z" Fill="Black" Stretch="Fill" Height="20" Width="10"/>
<!--thick left arrow-->
<Path Data="M 410.312 454.729 151.767 244.996 410.312 35.271 381.693 0 79.688 244.996 381.693 490 Z" Fill="Black" Stretch="Fill" Height="20" Width="10"/>
<!--thin right arrow-->
<Path Data="M 96.536 490 403.019 244.996 96.536 0 86.981 11.962 378.496 244.996 86.981 478.038 Z" Fill="Black" Stretch="Fill" Height="20" Width="10"/>
<!--thick right arrow-->
<Path Data="M 106.601 490 412.15 245.004 106.601 0 77.85 35.856 338.702 245.004 77.85 454.159 Z" Fill="Black" Stretch="Fill" Height="20" Width="10"/>
PS: i believe this can work on any svg icon.
I'm using the arrows in chart with zoom function and I need them to be precise, here are the final arrows:
<!-- Left Arrow -->
<Path
HorizontalAlignment="Center"
Data="m 290 10 5 -5 0 2.5 8 0 0 4 -8 0 0 3 z"
Fill="#571CB61C"
Stroke="#FF00B400"
StrokeThickness="1" />
<!-- Right Arrow -->
<Path
HorizontalAlignment="Center"
Data="m 4 14 4 0 0 -9 3 0 -5 -5 -5 5 3 0 z"
Fill="#571CB61C"
Stroke="#FF00B400"
StrokeThickness="1">
<Path.RenderTransform>
<RotateTransform Angle="90" CenterX="2" CenterY="8" />
</Path.RenderTransform>
</Path>
it is quite easy and it is explained here :
https://wpf.2000things.com/tag/streamgeometry/
https://learn.microsoft.com/it-it/dotnet/framework/wpf/graphics-multimedia/path-markup-syntax
I have a resource defined like this:
<Canvas x:Key="export"
Width="48"
Height="48">
<Path Fill="{DynamicResource CurrentColor}"
Data="M23,12L19,8V11H10V13H19V16M1,18V6C1,4.89 1.9,4 3,4H15A2,2 0 0,1 17,6V9H15V6H3V18H15V15H17V18A2,2 0 0,1 15,20H3A2,2 0 0,1 1,18Z" />
</Canvas>
And I'm using it like this:
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Margin="10,5,10,10"
Width="Auto"
Height="Auto">
<Button.Template>
<ControlTemplate TargetType="Button">
<Rectangle Width="48"
Height="48"
Fill="{DynamicResource CurrentColor}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill"
Visual="{Binding}" />
</Rectangle.OpacityMask>
</Rectangle>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
As can be seen I'm trying to set the rectangle size to 48x48 but the Path Data coordinates in the resource were defined to draw it as 24x24. No matter what I try I cannot strech the resource to fill the button. How can it be done?
I'm open to change the button implementation if needed. All I need is to be able to show the icon in the button in a certain color.
Remove canvas and use Stretch="Uniform" on the Path. If you want to reduce height/width of the Path, add it into eg. Grid or just set Width and Height of the Path:
<Grid Width="48" Height="48">
<Path Fill="{DynamicResource CurrentColor}"
Stretch="Uniform"
Data="M23,12L19,8V11H10V13H19V16M1,18V6C1,4.89 1.9,4 3,4H15A2,2 0 0,1 17,6V9H15V6H3V18H15V15H17V18A2,2 0 0,1 15,20H3A2,2 0 0,1 1,18Z" />
</Grid>
Try using HorizontalAlignment="Stretch" and VerticalAlignment="Stretch"
But then again if Width and Height are set they take precedence over the Stretch setting. See Microsoft on HorizontalAlignment.
I have my own control which derives from StackPanel. This control contains two other controls, first Border (with TextBlock inside) and StackPanel (able to containes other StackPanels).
Now, when I new StackPanel is added to the internal StackPanel I would like to draw a Line which could connect Border with a new added StackPanel.
I guess this can be handle in code, so when I need StackPanel is added I could determine his and Border locations, and base on this I could draw a line. So my question is: can you see any other ways to achieve the same result? how can keep the link between Border and StackPanel when one of the items it is dragging the layout ?
Thank you for your help
BR Jarek
You can do this the super-easy way by doing something like this:
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<Border Margin="10 0 0 0" BorderBrush="Black" BorderThickness="5 0 0 0" >
<TextBlock Text="MyText" Margin="5 0 0 0 " />
</Border>
<StackPanel Margin="10 0 0 0" Orientation="Vertical">
<Border BorderBrush="Black" BorderThickness="5 0 0 0">
<TextBlock Text="Sub-Item 1" Margin="15 0 0 0" />
</Border>
<Border BorderBrush="Pink" BorderThickness="5 0 0 0">
<TextBlock Text="Sub-Item 2" Margin="15 0 0 0" />
</Border>
<Border BorderBrush="Black" BorderThickness="5 0 0 0">
<TextBlock Text="Sub-Item 3" Margin="25 0 0 0" />
</Border>
</StackPanel>
</StackPanel>
</Grid>
I have a slider with minimum value 0 and maximum value 1.
When I currently slide it, the value gets set to a decimal value between 0 and 1, e.g. 0.2342343.
However, I want the value to only be either 0 or 1 (so that my ViewModel property will register the change only if it is 0 or 1 and not multiple times as the user drags it from 0 to 1).
How can I make the slider value only be 0 or 1? I tried SmallChange, LargeChange and SnapsToDevicePixels, but none of these work.
<Slider Name="TheLanguageIndexSlider"
DockPanel.Dock="Bottom"
Minimum="0"
Maximum="1"
LargeChange="1"
SmallChange="1"
SnapsToDevicePixels="True"
Width="100"
Margin="5"
Value="{Binding LanguageIndex}"
HorizontalAlignment="Left"/>
Set the IsSnapToTickEnabled to true and assign a value of 1 to the TickFrequency property:
<Slider IsSnapToTickEnabled="True"
Maximum="1" />
from msdn
<Slider Width="100" Value="50" Orientation="Horizontal" HorizontalAlignment="Left"
IsSnapToTickEnabled="True" Maximum="3" TickPlacement="BottomRight"
AutoToolTipPlacement="BottomRight" AutoToolTipPrecision="2"
Ticks="0, 1.1, 2.5, 3"/>
In your case:
<Slider Name="TheLanguageIndexSlider"
IsSnapToTickEnabled="True"
Ticks="0, 1"
DockPanel.Dock="Bottom"
Minimum="0"
Maximum="1"
LargeChange="1"
SmallChange="1"
SnapsToDevicePixels="True"
Width="100"
Margin="5"
Value="{Binding LanguageIndex}"
HorizontalAlignment="Left"/>