Develop Reference

Resizable circle button xaml

I'm developping a universal app for Windows in XAML/C# and I can't manage to create a circle button that I can resize. I use an Ellipse with uniform stretch so as to make it circle and a ContentPresenter.
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stretch="Uniform">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
The problem is a uniform ellipse is automatically aligned top, left, and it's impossible to make it stretch the grid. When I resize the button, the ContentPresenter stays in the center while the ellipse stays in the top left corner. I'd like to be able to resize the button and that the text stays in the center of the circle.
Thanks for help!

You may use a Path with a circular EllipseGeometry:
<ControlTemplate TargetType="Button">
<Grid>
<Path Stretch="Uniform" ...>
<Path.Data>
<EllipseGeometry RadiusX="1" RadiusY="1"/>
</Path.Data>
</Path>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
You would however have to explicitly set the Width or Height of the Button, otherwise it would take up all available space.

I've also found another solution which is to use a ViewBox:
<ControlTemplate TargetType="Button">
<ViewBox>
<Grid>
<Ellipse Stretch="Uniform" Width="50" Height="50">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ViewBox>
</ControlTemplate>
The ViewBox automatically scales everything when resized. You have to set Width and Height, but it's only to set proportions. Very useful when using the user control with both Windows and Windows Phone.
Thanks for your answers!

How do I make my TextBlocks be the correct sizes in my C# XAML Windows 8.1 app?

I'm new to Windows 8.1 development, so forgive me if this question is obvious or rudimentary. I've experimented around with the various attributes quite a bit, and I can't make it work the way I want it to, so I figured maybe someone here could give me a hand.
A description of what I'm doing:
I made a UserControl so I can isolate the UI for this one thing I'm trying to do, and also so I can use it in various places in my real UI. The UserControl consists of a Button with a Grid in it. The Grid has definitions for 3 rows, and I want the rows (and the Border elements and TextBlock elements they contain) to take up 20% of the total height, 60% of the height, and 20% of the height for rows 0, 1, and 2, respectively. I also want the Grid to take up the entire height of the Button.
Here's the XAML markup for the UserControl, garishly colored so it's obvious where everything is.
<UserControl
x:Name="UserControlRoot"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d"
>
<Grid x:Name="LayoutRoot" Margin="0" Background="Red">
<Grid.Resources>
<Style TargetType="TextBlock" x:Key="UCTextBlock">
<Setter Property="FontSize" Value="20" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="TextWrapping" Value="NoWrap" />
</Style>
</Grid.Resources>
<!-- THIS BUTTON HAS SPACING AROUND IT - WHY? -->
<Button
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderBrush="White"
BorderThickness="5"
Background="Green"
Padding="0"
Foreground="Blue"
Margin="0"
>
<Grid Background="#ff333333">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="6*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" HorizontalAlignment="Stretch">
<TextBlock Text="THIS IS MY RED TEXT" Foreground="LightCoral" Style="{StaticResource UCTextBlock}" />
</Border>
<Border Grid.Row="1" HorizontalAlignment="Stretch">
<TextBlock Text="THIS IS MY WHITE TEXT, NOT TALL" Foreground="White" Style="{StaticResource UCTextBlock}" />
</Border>
<Border Grid.Row="2" HorizontalAlignment="Stretch">
<TextBlock Text="THIS IS MY BLUE TEXT" Foreground="LightSkyBlue" Style="{StaticResource UCTextBlock}" />
</Border>
</Grid>
</Button>
</Grid>
</UserControl>
This is what it looks like in the designer:
Note that the white text, which is in Row 1 (Height="6*"), is not 3x as tall as Row 0 and Row 2. As far as I understand it, the Height="6*" vs Height="2*" should make Row 1 bigger than Rows 0 and 2. I'm obviously misisng something obvious here, but I don't know what it is.
Any ideas as to why the TextBlocks aren't sizing the way I want them to? There are no external DesignTemplates that are affecting the style of any of the elements (as far as I can tell, though I'm not sure if there's a way for me to explicitly/exhaustively determine whether or not this is truly the case).
A mostly-unrelated aside: In case this helps someone else, I found that putting a Margin="0,-10" on the Button will get rid of the red area around the button within the outer Grid. It took awhile to figure that out, so hopefully it'll save someone else some time. There may be a ThemeResource that has the same effect, but if so I never found it.

In the Button set the horizontal and vertical content alignment to Stretch. This will stretch the content grid.
<Button HorizontalContentAlignment="Stretch" ...
</Button>

TL;DR: Set HorizontalContentAlignment and VerticalContentAlignment to Stretch
The ContentPresenter in the button has its HorizontalAlignment and VerticalAlignment property bound to the HorizontalContentAlignment and VerticalContentAlignment property respectively. You can see this in the default control template found on MSDN.
<Grid>
...
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="3">
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
</Border>
...
</Grid>
Because your Grid is actually inside the content presenter, it fills that space (not the entire space of the button). By setting those properties to Stretch you have the ContentPresenter fill the available space, which the Grid then also does, giving you the correct behavior.

WPF toolkit bar charts, setting the column width programmatically

I am trying to programmatically set the width of the column series in a WPF toolkit bar chart. Below is the existing code. But I am unable to set the width using ColumnDataPoint.WidthProperty.
Any suggestions would be of great help!
Style columnStyleRed = new Style(typeof(ColumnDataPoint));
columnStyleRed.BasedOn = this.Resources["CustomStyle"] as Style;
Setter setBackgroundRed = new Setter(ColumnDataPoint.BackgroundProperty, new SolidColorBrush(Colors.DarkRed));
Setter setWidth = new Setter(ColumnDataPoint.WidthProperty, 20);
columnStyleRed.Setters.Add(setBackgroundRed);
Thanks!

I tried the same without any luck.
ATM, I'm looking at OxyPlot, which seems to play much nicer than the toolkit.
This seems to work :
<oxy:ColumnSeries ... ItemsSource="{Binding Items}" ... ColumnWidth="4"/>
It can also be done from the code if you need it.

Ugly fix, I have the same problem, but My displays are going to be static as far as column numbers. I hard coded the margins in the template, that increased there widths.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DVC:ColumnDataPoint">
<Grid>
<Rectangle
Fill="{TemplateBinding Background}"
Stroke="Black"
StrokeThickness="1"
Margin="0,0,-20,0"/>
<Grid
Background="Transparent"
Margin="0 -20 0 0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top">
<TextBlock
HorizontalAlignment="Center"
Background="Yellow"
Text="{TemplateBinding FormattedDependentValue}"
FontWeight="Bold"
FontSize="8"
Margin="5,5,-20,2"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>

How to increase the thickness of a `Slider` control

I have a slider control in my grid:
<Slider x:Name="MainSlider"
Margin="659,145,417,146"
Grid.Row="1"
Orientation="Vertical"
SmallChange="1"
RenderTransformOrigin="0.0799999982118607,0.5"/>
I want it to be wider though, so that the whole bar is stretched out.
I've gone through the properties and Width doesn't actually change the thickness of the slider itself, just the frame.
How can I make the actual Slider thicker?

You will probably need to define your own style. You can copy the default style (using Expression Blend for example) and tweak the individual component values.
Use the "Edit Style" option to take a copy of the template and then work on that.
There's more information on MSDN

You can customize the style template of Slider as per your requirement:
http://codingsense.wordpress.com/2010/02/01/customize-a-slider-in-wpf-step-by-step-tutorial/
http://msdn.microsoft.com/en-us/library/vstudio/ms753256%28v=vs.90%29.aspx

If you make a template from a copy of the slider template:
Right-Click Slider->"Edit Template" -> "Edit a Copy"
Then you can change the TrackBackground and PART_SelectionRange WIDTH to whatever you want. They were "4.0" by default for my case:
<Border x:Name="TrackBackground"
Grid.Column="1"
Width="XX.X"
Margin="0,5"
HorizontalAlignment="center"
Background="{StaticResource HorizontalSliderTrackNormalBackground}"
BorderBrush="{StaticResource VerticalSliderTrackNormalBorder}"
BorderThickness="1"
CornerRadius="1">
<Canvas Margin="-1,-6">
<Rectangle x:Name="PART_SelectionRange"
Width="XX.X"
Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"
StrokeThickness="1.0"
Visibility="Hidden" />
</Canvas>
</Border>

How can I correctly show text in TextBox using templating in WP7 Silverlight?

I want the corners of my TextBox to have CornerRadius=12. I use the ControlTemplate, everything is fine, but the text in the textbox when I write something shows spaces or dots.
Here is the code:
<TextBox x:Name="UsernameTextBox" Text="{Binding Username, Mode=TwoWay}" Background="White" BorderBrush="#FF9ED3C1" >
<!--<TextBox.Text>
<Binding ElementName="username" ></Binding>
</TextBox.Text>-->
<TextBox.Template>
<ControlTemplate TargetType="TextBox">
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="12" Margin="12" >
<TextBox Text="{TemplateBinding Text}" Height="48" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" />
</Border>
</ControlTemplate>
</TextBox.Template>
</TextBox>
What should I change or which other way could I do the same?

The problem is that the TextBox in your ControlTemplate simply isn't high enough to display the text correctly. What you are seeing are no dots or spaces, but the upper parts of the letters, which are displayed further down where they are not visible anymore. To render the text correctly you have to increase the height of the TextBox or decrease the size of the font.
The following template shows some possible modifications (to your inner TextBox):
<TextBox Text="{TemplateBinding Text}" Height="71" FontSize="{TemplateBinding FontSize}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Margin="-7,-8" BorderThickness="1" />
Height="71" - this simply makes the TextBox high enough to render the text correctly.
FontSize="{TemplateBinding FontSize}" - also bind to the FontSize, so you can make your text smaller in the object properties in Visual Studio (set it for example to FontSize="{StaticResource PhoneFontSizeSmall}"; this way you could reduce the TextBox height by some pixels)
Margin="-7,-8" - reduce the distance between TextBox and Border to make the control more compact.