Develop Reference

C# WPF - Creating Custom Control. Not sure how to align Text Correctly

I'm trying to create a custom control; similar, say to a Compass, so it is circular. I have a compass face image, and an arrow image that I can rotate to point the right direction. The problem is that I have N,S,E,W markers that I want to update at times and thus made them labels. I divided the field up into percentages and put the labels in the right grid locations.
This all looks great.
BUT when I use this custom control on various pages, some work and some don't. What it comes down to is the size of the cell of the grid on the new page. In one case the grid width is 4x the grid height. The background image grows to fill the height; this is right. The West and East TextBlocks are way off of the Compass_Face image because the 1/4th the width of the cell is way to the left. I thought that they would be constrained to the size of the custom control but that appears to not be the problem.
I'm sure that there has to be a way to keep the text constrained to the compass_face image. Thoughts?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="50*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Image x:Name="imageBackground" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Source="Resources/compass_face.png"/>
<Image x:Name="imageArrow" Grid.Column="1" Grid.Row="1" Source="Resources/arrow.png"/>
<TextBlock x:Name="labelNorth" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="N"/>
<TextBlock x:Name="labelSouth" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="S"/>
<TextBlock x:Name="labelEast" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="E"/>
<TextBlock x:Name="labelWest" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="W"/>
</Grid>

Grid isn't really the best layout to use in this case, but you can force it to be square by putting a Viewbox around it and assigning your parent grid to a specific size. That will keep your text aligned properly:
<Viewbox>
<Grid Width="200" Height="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="50*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<!--<Image x:Name="imageBackground" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Source="Resources/compass_face.png"/>
<Image x:Name="imageArrow" Grid.Column="1" Grid.Row="1" Source="Resources/arrow.png"/>-->
<Ellipse Fill="CornflowerBlue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" />
<TextBlock Grid.Column="1" Grid.Row="1" Text="↑" FontSize="200" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock x:Name="labelNorth" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="N"/>
<TextBlock x:Name="labelSouth" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="S"/>
<TextBlock x:Name="labelEast" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="E"/>
<TextBlock x:Name="labelWest" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="W"/>
</Grid>
</Viewbox>

How can I layer an element on top of a Grid within a Page, effectively ignoring the grid for some elements?

Here is the code that I'm working with and an image which shows the result. This final product has the look that I'm going for, but I think that there must be a better way to do this.
<Page
x:Class="UIFollowAlong.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIFollowAlong"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="Rectangle"
x:Key="ColorButton">
<Setter Property="Margin" Value="5"/>
<Setter Property="RadiusX" Value="50"/>
<Setter Property="RadiusY" Value="50"/>
</Style>
</Page.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
The code in particular that I'm asking the question about is the Ellipse.
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
How can I align the ellipse to the center while ignoring the row and column definitions of the grid? By default, the ellipse goes to 0,0 and gets placed on top of the red rectangle in the top-most left-most grid position.
I tried to place within the page, rather than within the grid, but I think the page can only have one content property?
The picture I showed is exactly the result I wanted I'm just wondering if there is an alternative way to achieve this that does involve spanning multiple row and column definitions.
Thanks!

To have have multiple layers over the same area introduce one more Grid:
<Grid>
<!--layer 0-->
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
</Grid>
<!--layer 1, covers layer 0-->
<Ellipse x:Name="CenterDot"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
Grid with White background and Ellipse are positioned in the same cell of the outer Grid.
To see how Ellipse can cover Rectangles - increase Ellipse size (Height/Width)

How to compress or scale down an existing DataTemplate in wpf? [duplicate]

This question already has answers here:
WPF XAML: How to automatically scale down children of a component in XAML?
(2 answers)
Scale images in listview to fit
(1 answer)
Closed 5 years ago.
Does anyone know if I can scale down an existing DataTemplate? In other words, if I have a DataTemplate that displays a group of text-blocks, and images at a size of 300 by 300, can I scale down that DataTemplate to 50x50 to create a view without modifying the DataTemplate itself?
I have several DataTemplates for different elements that are displayed in the diagram. I would like to do a scale down (Preview) of these DataTemplate in order to display it to the user as a list or a group of them.
At the moment my only choice would be to scale it down manually to the preview size, but I was wondering if there is a function I can use to scale it down automatically.
Thanks in advance.
<DataTemplate x:Key="sElementLA">
<Border BorderThickness="1" BorderBrush="{Binding Path=Data.Held, Converter={StaticResource heldConverter}}"
Background="Transparent" x:Name="ElementIcon"
Width="Auto" Height="Auto"
TouchDown="touchDownHandler" TouchUp="touchUpHandler"
TouchMove ="touchMoveHandler" TouchLeave="touchLeaveHandler"
Stylus.IsPressAndHoldEnabled="False"
go:Node.Movable="False"
go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
go:Node.LocationSpot="TopLeft"
go:Part.SelectionAdorned="True"
go:Part.SelectionElementName="ElementIcon"
go:Part.SelectionAdornmentTemplate="{StaticResource NodeSelectionAdornmentTemplate}"
go:Part.Resizable="False"
go:Part.ResizeElementName="ElementIcon"
go:Part.ResizeAdornmentTemplate="{StaticResource NodeResizeAdornmentTemplate}"
go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}"
go:Part.Rotatable="False"
go:Part.DragOverSnapEnabled="True"
go:Part.DragOverSnapCellSpot="TopLeft"
go:Part.RotateAdornmentTemplate="{StaticResource NodeRotateAdornmentTemplate}">
<!--Element info-->
<Grid ShowGridLines="False" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="3" Width="300" Height="100" RadiusX="12" RadiusY="12"
StrokeThickness="1" Stroke="#5075ba" StrokeLineJoin="Round" StrokeStartLineCap="Round"
StrokeEndLineCap="Round" Fill="#bcc5d2"/>
<StackPanel Grid.Row="0" Grid.Column="0" Margin="30,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center">
<TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Medium"
FontSize="16px" Foreground="Black" HorizontalAlignment="Right" FontWeight="DemiBold"/>
<TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Regular"
FontSize="15px" Foreground="Black" HorizontalAlignment="Right"/>
<TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Regular"
FontSize="15px" Foreground="Black" HorizontalAlignment="Right"/>
</StackPanel>
<!--Element Node and Icon I-->
<Grid ShowGridLines="False" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.6*" />
<ColumnDefinition Width="0.4*"/>
</Grid.ColumnDefinitions>
<go:SpotPanel MouseEnter="Node_MouseEnter" MouseLeave="Node_MouseLeave" Grid.Column="0" >
<go:NodePanel Sizing="Fixed" go:SpotPanel.Main="True" >
<Rectangle Width="85" Height="85" x:Name="CB_VIcon" RadiusX="0" RadiusY="0" Stroke="Transparent" StrokeThickness="0"
Cursor="Hand" Fill="{StaticResource CB_V}" SnapsToDevicePixels="True">
</Rectangle>
</go:NodePanel>
</go:SpotPanel>
<Grid ShowGridLines="False" Grid.Column="1" VerticalAlignment="Center" Margin="0,0,4,0" HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="CLD" Margin="0,22,4,0" Foreground="DarkGreen" FontSize="16"
TextWrapping="NoWrap" FontFamily="Comapany Inspira Medium" Height="Auto"
VerticalAlignment="Center" HorizontalAlignment="Center" />
<fa:ImaComapanyAwesome Grid.Row="1" VerticalAlignment="Top" Icon="InfoCircle" Height="30"
Foreground="#33cccc" Margin="0,0,4,-10" HorizontalAlignment="Center"/>
</Grid>
</Grid>
</Grid>
</Border>
</DataTemplate>

The easiest way would be wrap the template's container in a Viewbox. Viewbox will scale its contents to fit itself.
Since DataTemplate is usually used in an ItemsControl you may need to use a custom container to utilize a viewbox around the template.

How do I Bind a WPF Ellipse's Height to its own Width?

I have an ellipse drawn inside a Grid.Row and Grid.Column. The Row is always taller than the Column is wide.
I want to draw an ellipse that fills the width of the grid column and who's height makes it a perfect circle.
I also want to draw a single digit number exactly in the center of the above ellipse. Basically ending up with a circle that has a number centered inside it.
I can easily set HorizontalAlignment="Stretch" on my Ellipse and on the TextBlock containing the number. This takes care of the width for me. However, how do I get the Height of the Ellipse and TextBlock to always match its Width, even when the Grid.Column width changes?
Here's some XAML to illustrate this. In the XAML below, I want the hard coded '63' to be based on the Grid.Column width, or the Width feild of the ellipse:
<Ellipse Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" Height="63" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top"/>
<TextBlock Grid.Row="1" Grid.Column="0" Width="63" Height="63" VerticalAlignment="Top" Text="1" TextAlignment="Center" FontSize="42" FontWeight="Bold"/>
Thanks for all your help. I ended up using Herdo's answer. Just set HorizontalAlignment to Stretch and then bind the height to the actual width of the ellipse. I did this same thing to the ellipse and to the text block:
<Ellipse HorizontalAlignment="Stretch" Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>
<TextBlock HorizontalAlignment="Stretch" Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>

Assuming you have a Grid containing the Ellipse, you can use the ActualWidth property, and keeping it stretched, without setting the Width property - allowing you to use the Ellipse without any reference to the parent container:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/> <!-- Or whatever width -->
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0"
HorizontalAlignment="Stretch"
Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>
</Grid>
Please take into account the remarks for the ActualWidth property on MSDN:
Because ActualWidth is a calculated value, you should be aware that
there could be multiple or incremental reported changes to it as a
result of various operations by the layout system. The layout system
may be calculating required measure space for child elements,
constraints by the parent element, and so on.
Therefore, the following example code...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Ellipse Grid.Row="1"
Grid.Column="1"
HorizontalAlignment="Stretch"
Fill="Red"
Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>
</Grid>
...will result into this behavior (the width/height would update every time, the container - the Grid in this case - changes its layout):

You don't need any bindings. Put a Path with a circular EllipseGeometry and Stretch="Uniform" into a common inner Grid, which you then place into your outer Grid.
<Grid>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<Grid Grid.Row="1" Grid.Column="0" VerticalAlignment="Top">
<Path Stretch="Uniform" Stroke="Black" StrokeThickness="3">
<Path.Data>
<EllipseGeometry RadiusX="1" RadiusY="1"/>
</Path.Data>
</Path>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"
FontSize="42" FontWeight="Bold" Text="1"/>
</Grid>
</Grid>

You have to bind the Height of the Ellipse to the grid column width like this :
<Grid x:Name="MyGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" Height="{Binding ElementName=MyGrid, Path=ColumnDefinitions[0].Width.Value}" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top"/>
</Grid>

I have skipped unimportant attributes
<Ellipse x:Name="El" Width="50" Height="{Binding ElementName=El,Path=ActualWidth}"/>
<TextBlock Height="{Binding ElementName=El,Path=ActualWidth}"/>

XAML : How to make content size force height of parent and other objects?

I'd like to solve the following with pure XAML if possible, but if it is not possible please let me know. I don't have a C# solution either, so if that must be utilized please send me down the appropriate path:
In the following, there is a 2-column grid. In the left column is a scrollviewer with dynamic content. In the right column is a stackpanel with dynamic content. I want the content of the right column to control the height of the parent grid and the left column - in other words, I want the right column to be the master. In the right column there might be three items or there might be 10. If there are only three, the height of the entire grid should be short and the content in the left scrollviewer should scroll. There may be 100 items in the left scrollviewer, so I can't have that item controlling the height.
Here is the sample code:
<Grid x:Name="grd_Parent" Background="#FFF4E9FF">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="Left" Grid.Column="0">
<!-- This side should scale (and scroll) to the height of the right column-->
<StackPanel VerticalAlignment="Top">
<Rectangle Height="50" Fill="Red"/>
<Rectangle Height="50" Fill="Blue"/>
<Rectangle Height="50" Fill="Black"/>
<Rectangle Height="50" Fill="Brown"/>
<Rectangle Height="50" Fill="Purple"/>
<Rectangle Height="50" Fill="DarkGreen"/>
<Rectangle Height="50" Fill="Violet"/>
<Rectangle Height="50" Fill="Wheat"/>
<Rectangle Height="50" Fill="DarkCyan"/>
<Rectangle Height="50" Fill="DarkGray"/>
<Rectangle Height="50" Fill="DarkOrange"/>
</StackPanel>
</ScrollViewer>
<StackPanel x:Name="Right" Grid.Column="1" VerticalAlignment="Top">
<!-- This content is dynamic as well, but height of this should be the height of the parent grid -->
<TextBlock Height="50" Text="This"/>
<TextBlock Height="50" Text="Side"/>
<TextBlock Height="50" Text="Should"/>
<TextBlock Height="50" Text="Determine"/>
<TextBlock Height="50" Text="The"/>
<TextBlock Height="50" Text="Height"/>
<TextBlock Height="50" Text="Of"/>
<TextBlock Height="50" Text="Parent"/>
</StackPanel>
</Grid>
Here is a screenshot of the sample as it exists:
Here is a screenshot of what I'm hoping it can look like:
Thanks in advance,
Beems

Try this and let me know if it works. The below changes cause the ScrollViewer to bind to the ActualHeight of the StackPanel. This way, it should never be larger than the StackPanel.
<Grid x:Name="grd_Parent" Background="#FFF4E9FF">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="Left" Height="{Binding ElementName=Right, Path=ActualHeight}" Grid.Column="0">
<!-- This side should scale (and scroll) to the height of the right column-->
<StackPanel VerticalAlignment="Top">
<Rectangle Height="50" Fill="Red"/>
<Rectangle Height="50" Fill="Blue"/>
<Rectangle Height="50" Fill="Black"/>
<Rectangle Height="50" Fill="Brown"/>
<Rectangle Height="50" Fill="Purple"/>
<Rectangle Height="50" Fill="DarkGreen"/>
<Rectangle Height="50" Fill="Violet"/>
<Rectangle Height="50" Fill="Wheat"/>
<Rectangle Height="50" Fill="DarkCyan"/>
<Rectangle Height="50" Fill="DarkGray"/>
<Rectangle Height="50" Fill="DarkOrange"/>
</StackPanel>
</ScrollViewer>
<StackPanel x:Name="Right" Grid.Column="1" VerticalAlignment="Top">
<!-- This content is dynamic as well, but height of this should be the height of the parent grid -->
<TextBlock Height="50" Text="This"/>
<TextBlock Height="50" Text="Side"/>
<TextBlock Height="50" Text="Should"/>
<TextBlock Height="50" Text="Determine"/>
<TextBlock Height="50" Text="The"/>
<TextBlock Height="50" Text="Height"/>
<TextBlock Height="50" Text="Of"/>
<TextBlock Height="50" Text="Parent"/>
</StackPanel>
</Grid>