How do I add text inside a shape in XAML - xaml

I am working on a Metro App using C++ and XAML. I want to create a polygon shape and add text inside it.
At first I thought of defining my own Controltemplate and apply it to Textblock but unfortunately it does not understand TargetType = "TextBlock".
Secondly, I thought of inheriting the Polygon class and see if I can do anything there but that class is sealed.
Any ideas on how to achieve this?

In WPF XAML you could do something simple like this:
<Grid Width="60" Height="100">
<Ellipse Fill="Yellow"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hello"/>
</Grid>
To get text in the centre of a yellow ellipse.
I'm guessing something that simple will work on WinRT.

You can use something like this with ContentControl or so many other controls:
<ContentControl Width="200" Height="100" Content="Something">
<ContentControl.Template>
<ControlTemplate>
<Grid>
<Ellipse Fill="Red"/>
<TextBlock Text="{Binding Content,RelativeSource={RelativeSource FindAncestor,AncestorType=ContentControl}}"
TextWrapping="Wrap"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>

Related

Is it possible to create a TextBlock style with border - or do I have to create a UserControl?

At the moment, I keep repeating the XAML below used in titles what I want to improve.
<Border Grid.Row="1" Grid.Column="1" Background="{StaticResource Brush.Black24}" CornerRadius="4">
<TextBlock Margin="8" FontFamily="Segoe UI Semibold" FontSize="14" Foreground="White" VerticalAlignment="Center" Text="BUILT IN MODULES"/>
</Border>
Apparently TextBlocks have no template. I think creating a UserControl is a bit excessive. In addition, I would have to deal with Attached Properties. Any ideas?

WPF - How to access a control in a GridView templated cell

There are similar topics here, but none of the resolutions have helped me.
I have the following:
<ControlTemplate x:Key="PlateWellControlTemplate"
TargetType="{x:Type ContentControl}">
<Grid x:Name="PART_stateGrid"
Margin="0,0,5,0">
<Ellipse Fill="#FF252526"
MinWidth="34"
MinHeight="34"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Ellipse x:Name="PART_stateControl"
Fill="#FFE6E6E6"
MinWidth="32"
MinHeight="32"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Label FontWeight="Bold"
FontFamily="Verdana"
Foreground="Black"
Background="#00000000"
HorizontalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
Content=""/>
</Grid>
</ControlTemplate>
Used here:
<DataGridTemplateColumn Header="2">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Tag="{Binding WellX2}"
x:Name="wellX2"
MouseDown="well_Click">
<ContentControl Template="{DynamicResource PlateWellControlTemplate}"/>
Then accessed here in code-behind:
DataTemplate cellTemplate = (DataTemplate)cell.Template.FindName("PART_stateControl", cell);
Where "cell" is a non-null DataGridCell using the template. The above line always returns null and I do not understand why. I have also tried as a ControlTemplate and a ContentPresenter.
What I need is a reference to the Ellipse ("PART_StateControl") in the DataGridCell I've been handed as I need to change one of it's properties. But in general, how do I get to named items in the ContentControl Template? This is all triggered by a click event on the parent Grid control referenced in the DataGridTemplateColumn.CellTemplate here named "wellX2". Again, there are a few discussions on here regarding this, but none have helped. I feel like there's something silly missing. This has to be doable.
Thanks in advance for any help you can afford.
Answer found as a combination of this:
Getting a control from a DataGridCell
and this:
How to Get element inside the content control
Brilliant!

I cant place or set background or border of my user control

I've created a simple user control for my xaml project, but as you can see from my image i cant seem to be able to do certain things.
Ignore the red line, its the size of the control for illustrate its size.
It's placement should be middle of the screen:
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
And as you see its background color should be "Azure" with a blueish border of 3.
Why is this?
In the background I have a Canvas:
<Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0">
<Canvas Name="GameCanvas">
<Canvas.RenderTransform>
<CompositeTransform x:Name="CanvasRenderTransform" />
</Canvas.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragStarted="GestureListener_DragStarted" DragDelta="GestureListener_DragDelta" Tap="GestureListener_Tap" PinchStarted="GestureListener_PinchStarted" PinchDelta="GestureListener_PinchDelta"/>
</toolkit:GestureService.GestureListener>
</Canvas>
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
</Grid>
As for my third problem, having the events in the canvas causes the Move slider to be interrupted, making me only able to push it a little each time :-/
In case TileMenu is a UserControl you would have to set these properties on the top level container in the UserControl's XAML as this defines the entire visual structure of the control.
You could bind to the appropriate values in the UserControl, however:
<UserControl x:Class="YourNamespace.TileMenu" ...
x:Name="tileMenu">
<Border BorderBrush="{Binding BorderBrush, ElementName=tileMenu}"
BorderThickness="{Binding BorderThickness, ElementName=tileMenu}">
<Grid>
...
</Grid>
</Border>
</UserControl>

Custom pushpins and templating images

This is probably something simple but I am tearing my hair out at the moment.
I want to display pushpins on a map from a model. So I have created a template for the pushpins
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="Resources/Pushpins/img.png" Stretch="Fill"/>
</Grid>
</ControlTemplate>
Then use it to a binded collection as follows:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}" Template="{StaticResource PushpinTemplate}" />
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
But what I want to be able to do is change the image source via a binding but am not sure how I go about doing this. What I was intending to do was to use a converter to change the image depending on an id within the collection if that alters the best way to do this.
Edit:
I got a little further:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}"/>
<m:Pushpin.Template>
<ControlTemplate>
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding Type,Converter={StaticResource ImageConverter}}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
</m:Pushpin.Template>
</m:Pushpin>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
If I move the pushpin template into the </phone:PhoneApplicationPage.Resources> section then it fails. I am not sure why. I guess now I am trying to get to grips with my uinderstanding of how this all works
Just add the binding to the ControlTemplate
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding ImageUri}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
I would recommend a ImageUri (of type Uri) property that reflects what image to display, rather than using a converter. But a converter might also work, the bindings are done in the same way.

silverlight vertical progressbar

I can not figure out what I did wrong. I have a Usercontrol that has a vertical progressbar and under it a label.
<UserControl x:Class="IFramedInBrowser.Code"
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"
mc:Ignorable="d" Height="150" Width="15">
<Grid Width="120" Height="15" >
<StackPanel Width="120" Height="15" >
<ProgressBar Grid.Row="0" Value="{Binding Path=Percent}" Maximum="100" Width="120" Height="15" />
</StackPanel>
<TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock1" Text="{Binding Path=Symbol.Name}" VerticalAlignment="Top" >
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<Grid.RenderTransform>
<RotateTransform Angle="-90"/>
</Grid.RenderTransform>
</Grid>
</UserControl>
This usercontrol is then used in a ItemsControl
<ItemsControl x:Name="HorizontalListBox"
ItemsSource="{Binding Source={StaticResource MyViewModel}, Path=List}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center" Height="150"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<my:Code DataContext="{Binding}">
</my:Code>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
It should look like a piano keybord at the end...
After the rotation transformation the progressbar is chopped... What did I dowrong? How to fix this?
You can try to add different background colors to all controls to find out sizes of controls.
Also SilverlightSpy is now free for read only and you can go through the real visual tree at runtime.
Anyway, I would suggest to change the orientation of ProgressBar by customizing its template.
This is a clipping issue. You are setting too many heights and widths everywhere and it's confusing to know which one is in control of dimensions. Also, the stacking in the ListBox works on the layout and the RotateTransform is only effective on the final visual pass, so it's rotating a clipped progress bar.
You should follow jumbo's advice and create a vertical progress bar by modifying the template, not by rotation.
If you don't want to create the template, then you need to remove the main Grid you have in the UserControl and use a Canvas instead. Canvases don't clip. They let your elements float freely, which is probably what you want.