Develop Reference

Horizontal alignment in control seems to be ignored on all but the last item

I have a custom radio button based on togglebutton:
<Style TargetType="{x:Type local:ToolbarRadioButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="60"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Vertical">
<iconPacks:PackIconModern Kind="{Binding TbIcon, RelativeSource={RelativeSource AncestorType=RadioButton}}"
Height="30" Width="35" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding TbText, RelativeSource={RelativeSource AncestorType=RadioButton}}" FontSize="12"
HorizontalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I use this control to create four toggle/radio buttons. I've horizontal centered the items in datatemplate, but I end up with this:
Forecast and its icon seem to be centered, but the others are partially left-aligned. They all use the same control so shouldn't they all be centered?
EDITS FOR CLARITY:
It doesn't matter which order I put them in, Forecast is always the one that's aligned correctly.
There is no whitespace in the text nor is there whitespace in the images and all images are sized according to the control defined above. Here's the implementation portion in case it's useful, though they're all the exact same:
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="0">
<customs:ToolbarRadioButton TbText="Day" TbIcon="CalendarDay" GroupName="calViewType" x:Name="dayOnOff"/>
<customs:ToolbarRadioButton TbText="Week" TbIcon="CalendarWeek" GroupName="calViewType" x:Name="weekOnOff"/>
<customs:ToolbarRadioButton TbText="Month" TbIcon="CalendarMonth" GroupName="calViewType" x:Name="monthOnOff" IsChecked="True"/>
<customs:ToolbarRadioButton TbText="Forecast" TbIcon="PeopleMultiple" GroupName="calViewType" x:Name="forecastOnOff"/>
</StackPanel>

For future readers: I figured out the answer by digging into the documentation on Button. There is a property on buttons called HorizontalContentAlignment (and vertical, of course) that apparently needs to be set to align the visual content. You can't set the HorizontalAlignment property of the item that is the content explicitly; apparently, the button wants to do that for you.

Fill remaining space of parent with 2 or more expanders WPF

I have 2 expanders inside a dockPanel, i need to fill all the height available inside de dockPanel when a expander is opened and if both of them are open, i need each expander to take the half of the available height so they can fill all the space. Here is my code:
<DockPanel Background="Black">
<Expander Name="articlesExpander" Template="{StaticResource ExpanderHeaderImage}" DockPanel.Dock="Top">
<Grid Name="articlesGridExpander" ShowGridLines="True" Background="#FFEC0000">
<TextBlock>Hello</TextBlock>
</Grid>
</Expander>
<Expander Name="turneroExpander" Template="{StaticResource ExpanderHeaderImage}" DockPanel.Dock="Bottom">
<Grid Name="turneroGridExpander" ShowGridLines="True" Height="{Binding ElementName=DummyExpanderHeight, Path=Height}" Background="#FF0AE400">
<TextBlock>Bye</TextBlock>
</Grid>
</Expander>
</DockPanel>
Here i describe the 3 possible states of the expanders:
1) the first expander is open and the second is closed. As you can see the first expander does not take all the avialble height:
2) The second expander is open and the first expander is closed. This is the right behaviour i would like to have with both expanders:
3) Both expanders are open. I need them to take half and a half height:
How can i achieve the right behaviour of the expanders?

You can achieve what you want using pure XAML if using a Grid instead of DockPanel. I don't see the purpose of using DockPanel in this case. Otherwise you need code behind (some Converter) to resize the Expanders correctly.
The idea here is we need a Grid having 2 rows, when the contained Expander is collapsed, the row's Height should be Auto, otherwise the row's Height should be *. When the 2 Expanders are expanded, both the rows have Height of * and each one will share half the whole Height of the Grid:
<Grid Background="Black">
<Grid.Resources>
<Style TargetType="RowDefinition">
<Setter Property="Height" Value="Auto"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Tag.IsExpanded, RelativeSource={RelativeSource Self}}"
Value="True">
<Setter Property="Height" Value="*"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Tag="{Binding ElementName=articlesExpander}"/>
<RowDefinition Tag="{Binding ElementName=turneroExpander}"/>
</Grid.RowDefinitions>
<Expander Name="articlesExpander" Template="{StaticResource ExpanderHeaderImage}">
<Grid Name="articlesGridExpander" ShowGridLines="True" Background="#FFEC0000">
<TextBlock>Hello</TextBlock>
</Grid>
</Expander>
<Expander Name="turneroExpander" Template="{StaticResource ExpanderHeaderImage}" Grid.Row="1">
<Grid Name="turneroGridExpander" ShowGridLines="True" Height="{Binding ElementName=DummyExpanderHeight, Path=Height}" Background="#FF0AE400">
<TextBlock>Bye</TextBlock>
</Grid>
</Expander>
</Grid>

Border fail to size to Textblock

In an attempt to go around the problem described in this other question: Segoe UI Symbol smiley is sometimes colorful, sometimes not (WP8.1 + XAML), I tried the following: wrapping my Textblock with a Border element with rounded-corners (high CornerRadius). This way I can change the background color of the border and it looks pretty much as if the smiley had a background color itself... almost.
There is still a small gotcha I cannot wrap my head around: the height of the TextBlock seems to be out of my control. The "Segoe UI Symbol" (smiley) I want to display acts as if it had some kind of padding that prevented the border to fit the icon exactly. I end up with some kind of oval shape around my round smiley... not quite what I had in mind.
I stripped the XAML to its bare essence and played with it in a new blank app (just paste this in a new app, you should see exactly the screenshot below):
<Grid>
<Border Background="Red" Grid.Column="0"
CornerRadius="50" BorderThickness="0"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="😠"
FontFamily="Segoe UI Symbol" FontSize="50"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
This gives you that:
Any idea what I can tweak there?

The problem is that the text (emoticon) has not the same height and width. You can do a custom fix by applying a custom style to the textbox and change its padding until you achieve the result you want. It's not a dynamic solution but if the size of the icon is standard this solution i think will work.
First of all create a new style:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
<Setter Property="Padding" Value="10,0,10,3"/>
</Style>
</phone:PhoneApplicationPage.Resources>
Then apply it to the TextBlock
<Grid>
<Border Background="Red" Grid.Column="0"
CornerRadius="50" BorderThickness="0"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="😠"
FontFamily="Segoe UI Symbol" FontSize="50"
HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource CustomTextBlockStyle}" />
</Border>
</Grid>
The result:
If you want something like this:
Try to play around with padding and margin too
<Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="-2,-13,-2,-9"/>
<Setter Property="Padding" Value="0,0,0,0"/>
</Style>

How to make toolbar buttons share same width?

I have a toolbar
Code:
<ToolBarTray>
<ToolBar>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
</ToolBar>
</ToolBarTray>
On Image I only set the Source and on the Label I only set the Content.
However as the image shows, the buttons aren't sharing the same width. "Remove" button is wider than the others.
How can I make it so that all toolbar buttons will share the same width as the "Remove" button?

One way you could set the Width of all of your buttons at the same time, is to use a Setter in your ToolBar.Resources, like so:
<ToolBar>
<ToolBar.Resources>
<Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button">
<Setter Property="Width" Value="80"/>
</Style>
</ToolBar.Resources>
<Button>
...
<Button>
...
</ToolBar>
That way you don't need to manually set the width on each Button individually.
You could also use a Setter to set the Stretch property, like so:
<Setter Property="Stretch" Value="None"/>
Edit:
Apparently, according to https://stackoverflow.com/a/2406213/3101082, you need to ensure that you are setting the Style using the x:Key="{x:Static ToolBar.ButtonStyleKey}" in order for it to apply to ToolBar buttons. I have updated my answer to reflect this.

This will likely work, I haven't tested it but by specifying the width of the button and the image scaling, you should find it does the trick.
<Button Width="intValue">
<StackPanel>
<Image Source="yourImage"
RenderOptions.BitmapScalingMode="Fant" />
<Label/>
</StackPanel>
</Button>

WPF: Style ToolTip with Image

Is it possible to create a style for ToolTip that would place an image next to the Item on which the tool tip resides and then show the tool tip text when the user hovers over the image? Something like this:
Currently I am doing a StackPanel to add the image with the tool tip like so:
<StackPanel Orientation="Horizontal">
<CheckBox Content="Reload Employee Data"
IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}"
Grid.Row="0"
Grid.Column="0">
</CheckBox>
<Image Source="/DelphiaLibrary;Component/Resources/info.ico"
ToolTip="Check if you want to re-upload ...."/>
</StackPanel>
EDIT
Just to clarify, I am looking for a way to style ToolTip such that if I define ToolTip on any object (i.e., Button, CheckBox, etc.) the info image is shown and the tool tip text is placed on this info image.
I would like to be able to do something like this and still get the same as the stack panel above:
<CheckBox Content="Reload Employee Data"
IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}"
Grid.Row="0"
Grid.Column="0"
ToolTip="Blah blah blah..."
Style="{StaticResource ToolTipImageStyle}">
</CheckBox>
And be able to apply this ToolTipImageStyle to any control (i.e., Button, CheckBox, TextBox, etc.). If that isn't possible can I style an individual control and just create different styles for different controls (one for buttons, another for TextBlock, etc.)?

This should do it. I couldn't figure out the color so just change that.
Source 1
Source 2
<Image Source="/DelphiaLibrary;Component/Resources/info.ico" Width="25" Height="25">
<Image.ToolTip>
<ToolTip Background="LightBlue">
<TextBlock Width="200" TextWrapping="WrapWithOverflow">
Check if you want to re-upload table foxpro.hrpersnl from the source. <LineBreak />
Leave unchecked to use existing data that has been previously uplaoded.
</TextBlock>
</ToolTip>
</Image.ToolTip>
</Image>
Update 1:
Source 1
In the App.xaml add this:
<Application.Resources>
<Style TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}" >
<TextBox Background="LightBlue" Width="200" TextWrapping="WrapWithOverflow" Text="{TemplateBinding ToolTip.Content}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Then in your XAML file change to:
Note: This will work with all object's tool tips.
<Image Source="Images/MenuImageZoomOut.png" Width="25" Height="25"
ToolTip="Check if you want to re-upload table foxpro.hrpersnl from the source. Leave unchecked to use existing data that has been previously uplaoded." />
The image:
If this doesn't work, try this: Source