Develop Reference

Text Cut off in WPF Ribbon Control

I've started playing around with the Microsoft Ribbon control and I ran into an issue with the RibbonButton when there is more than 1 line of text for the label
The code I have for the ribbon is as so:
<Ribbon x:Name="ribMainRibbon" SelectionChanged="ribMainRibbon_SelectionChanged" DockPanel.Dock="Top">
<Ribbon.QuickAccessToolBar>
<RibbonQuickAccessToolBar x:Name="ribQuickAccessToolBar">
<RibbonButton SmallImageSource="/Media/Icons/New.png"/>
<RibbonButton SmallImageSource="/Media/Icons/Open.png"/>
<RibbonButton SmallImageSource="/Media/Icons/Save.png"/>
<RibbonButton SmallImageSource="/Media/Icons/Print.png"/>
</RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu Visibility="Collapsed">
</RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<RibbonTab Header="{DynamicResource MenuDesignOptions}">
<RibbonGroup>
<RibbonMenuButton LargeImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Label="{DynamicResource MenuAutoCalc}" x:Name="rmbAutoCalc">
<RibbonMenuItem ImageSource="/Media/Icons/ToolBar/PlaceHolder2.png" Header="{DynamicResource MenuAutoCalc}" x:Name="rmiAutoCalc" Click="rmiAutoCalc_Click"/>
<RibbonMenuItem ImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Header="{DynamicResource MenuManualCalc}" x:Name="rmiManualCalc" Click="rmiManualCalc_Click"/>
</RibbonMenuButton>
<RibbonMenuButton LargeImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Label="{DynamicResource MenuEnglish}" x:Name="rmbUnits">
<RibbonMenuItem ImageSource="/Media/Icons/ToolBar/PlaceHolder2.png" Header="{DynamicResource MenuEnglish}" x:Name="rmiEnglishUnits" Click="rmiEnglishUnits_Click"/>
<RibbonMenuItem ImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Header="{DynamicResource MenuMetric}" x:Name="rmiMetricUnits" Click="rmiMetricUnits_Click"/>
</RibbonMenuButton>
<RibbonButton LargeImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Label="{DynamicResource MenuReverse}" x:Name="rbtReverse" Click="rbtReverse_Click">
</RibbonButton>
</RibbonGroup>
</RibbonTab>
And the relevant string resources:
<s:String x:Key="MenuReverse">Reverse System</s:String>
<s:String x:Key="MenuEnglish">Imperial Units</s:String>
<s:String x:Key="MenuAutoCalc">Auto Calc</s:String>
But when I run this code it ends up looking like this:
So I can fix it by specifying the Height property of the RibbonButton but that seems like the wrong fix for this. And I know you should be able to have 2 line descriptions on those buttons because both MS Word and Excel have them:

Turns out it was one of my global styles I was applying to all StackPanels
<Style TargetType="StackPanel">
<Setter Property="Orientation" Value="Vertical"/>
<Setter Property="Margin" Value="2"/>
</Style>
This was adding the margin inside of the Ribbon Buttons causing it to be cut off

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

ToggleButtons in WPF

I have two ToggleButtons. I want only one of them to be in the Pressed state at any time. So let's say Model ToggleButton is pressed:
I want to achieve the below concepts:
If I press Drawing ToggleButton, the Model ToggleButton will be unpressed and Drawing ToggleButton will go to pressed state.
If press the Model Button which is in the pressed state nothing will happen.
By the way here is all I have done so far :(
<ToggleButton Width="50" Height="23" Margin="0 0 0 0">Model</ToggleButton>
<ToggleButton Width="50" Height="23" Margin="0 0 7 0">Drawing</ToggleButton>
Update:
Using the provided link under the comments, I came up with this:
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Model" IsChecked="True" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Drawing" />
Now the above code gives me two buttons, but how can I style these? I know how to style. But I don't know what to style here? I mean I have already filled the style property here how can I style the ToggleButton itself?

Since RadioButton inherits from ToggleButton, you can set ToggleButton style to it and use BasedOn to inherit default style of ToggleButton like this:
<RadioButton GroupName="Test" Width="50" Height="23" Margin="0 0 7 0"
Content="Model">
<RadioButton.Style>
<Style TargetType="ToggleButton"
BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Background" Value="Red"/>
<!-- Set other properties here-->
</Style>
</RadioButton.Style>
</RadioButton>

According to this answer that DLeh linked in comments, you can do this by styling a RadioButton to use the ToggleButton styles.
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" />
To answer your second question on how to customize the style property for this, you can create another style that inherits from the base ToggleButton style, and use it instead. Like this:
<Style x:Key="CustomToggleButtonStyle"
TargetType="{x:Type RadioButton}"
BasedOn="{StaticResource {x:Type ToggleButton}}">
// Custom Style setters here
</Style>
<RadioButton Style="{StaticResource CustomToggleButtonStyle}" />
And of course there's always the option of completely rewriting the entire template yourself from scratch. MSDN has a good examples of a custom ToggleButton Template you could use to start with.

Button how to remove border

I have a question about dat wpf buttons.
In my app I have fore example some code
<Button x:Name="SukaKnopka" VerticalAlignment="Top" HorizontalAlignment="Right" Background="Black" MaxHeight="20" MaxWidth="20" BorderBrush="Black">
<Image Source="ButtonsImages/close_btn.png" Stretch="Fill"/>
</Button>
All is fine but there is some little border around this button =( I have tryed BorderBrush="{x:Null}"
but the border again present. (This border highlights if MouseOver)

As far as I understand it, a lot of WPF controls are fully defined in their styles. So even if you specify a different border on a Button, for example; the Button's existing styles will override whatever you have specified. To overcome this, you must create a ControlTemplate.

<Button>
<Button.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
</Style>
</Button.Resources>
</Button>
This should do the trick. It will set every BorderThickness or every Border inside the button to 0.

slade is right, try modifying what you have to look more like the following and it should give you what you want.
<Button x:Name="SukaKnopka" VerticalAlignment="Top" HorizontalAlignment="Right" Background="Black" MaxHeight="20" MaxWidth="20" BorderBrush="Black">
<Button.Template>
<ControlTemplate>
<Image Source="ButtonsImages/close_btn.png" Stretch="Fill"/>
</ControlTemplate>
</Button.Template>
</Button>

Been a while since I did any "real" WPF, but does
BorderThickness="0,0,0,0"
work?