Text Cut off in WPF Ribbon Control - c#

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

Related

How to remove ContextMenu border

So im trying to make button appear on right click in my ListBox.
<ListBox Grid.Column="1" Margin="358,44,20,63" Name="scriptbox" Background="#FF282828" Foreground="White" SelectionChanged="Scriptbox_SelectionChanged" BorderThickness="0">
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem
Template="{DynamicResource MenuItemTemplate}"
Header="Delete"
Click="MenuItemDelete_Click" >
</MenuItem>
</ContextMenu>
</ListBox.ContextMenu>
This is my MenuItem template.
<ControlTemplate TargetType="{x:Type MenuItem}" x:Key="MenuItemTemplate">
<Border x:Name="Border" Background="#FF282828" Padding="30,5,30,5" BorderThickness="0" Margin="0">
<ContentPresenter ContentSource="Header" x:Name="HeaderHost" RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Border" Value="#51544e"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ItemsPanelTemplate x:Key="MenuItemPanelTemplate">
<StackPanel Margin="-3,0,0,0" Background="White"/>
</ItemsPanelTemplate>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="ItemsPanel" Value="{StaticResource MenuItemPanelTemplate}"/>
</Style>
Everything is fine but there is white border all around the button.
What you recognize as a white border is the ContextMenu itself that contains your MenuItems. Try adding more buttons and changing the Background and BorderBrush of the ContextMenu and you will see.
<ContextMenu Background="Red" BorderBrush="Blue">
Changing the brushes like this will lead to this result, which makes it obvious.
If you create a custom control template for your MenuItems you should probably do so for the ContextMenu, too, if only setting brushes does not fit your requirements. As you can see in the example, there is still a vertical white line that is part of the default control template, that you might want to get rid of. You can start from this example, although it is neither the default template nor complete. Look at this related post for guidance on how to extract the default control template for ContextMenu if you need it.

WPF ToolTip Text Alignment

I have the following ListViewItem:
<GridViewColumn Width="{Binding ActualWidth,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}},
Converter={StaticResource MathConverter}, ConverterParameter=(x/10)*1}">
<GridViewColumn.Header>
<GridViewColumnHeader Content=" Total Fees "
HorizontalContentAlignment="Right" />
</GridViewColumn.Header>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding GarnishmentTotals.TotalFees, StringFormat={}{0:c}}"
TextAlignment="Right" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
The Style for this item is as follows:
<Style x:Key="MultipleGarnishmentsStyle" TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding Garnishments.Count, Converter={StaticResource GreaterThanEqualToBooleanConverter}, ConverterParameter=2}" Value="True"
h:TriggerTracing.TriggerName="MultipleGarnishmentsStyle_Trigger1"
h:TriggerTracing.TraceEnabled="True">
<!-- Leave the content alone and just change the format string -->
<Setter Property="TextBlock.FontWeight" Value="UltraBold" />
<Setter Property="ToolTip" Value="Employee has multiple garnishments. Double click to view details." />
</DataTrigger>
</Style.Triggers>
</Style>
I am having an issue with the alignment of the text within the ToolTip.
The text seems to be using the ListViewItems text alignment (Right). I have tried adding the following properties to teh style but nothing changes:
<Setter Property="TootlTip.HorizontalAlignment" Value="Left" />
<Setter Property="TootlTip.HorizontalContentAlignment" Value="Left" />
<Setter Property="TootlTip.Width" Value="300" />
Is there a way to either increase the ToolTip width so there is no wrapping of the text or make the ToolTip text left aligned.
I got the same problem and after some digging (RibbonToolTip is inheriting alignment from a textbox), I found a solution. It maybe late, but it would benefit others.
What you need to do is to setup you ToolTip style like this:
<Style TargetType="ToolTip">
<Setter Property="TextBlock.TextAlignment" Value="Left"/>
</Style>
Since Tooltip is a ContentControl you can customize its content as you want. Consider the following example:
<Grid>
<Button Content="Hi there!">
<Button.Style>
<Style TargetType="Button">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip MaxWidth="100" HorizontalContentAlignment="Center">
<TextBlock Text="fsdfasdfasdfasdfasdfasdfadsfasdf fadsfadsf adfa fdasfasdfasdfa adfasd" TextAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap"/>
</ToolTip>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
You can play around with the content's properties (in this case the TextBlock) in order to achieve the final look you want.

WPF: Make AvalonEdit Unfocusable and Uneditable

How can I make AvalonEdit unfocusable and uneditable in my WPF App?
I've tried this:
<avalonEdit:TextEditor
x:Name="AvalonQuery"
xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit"
FontFamily="Consolas"
SyntaxHighlighting="SQL"
ShowLineNumbers="True"
IsReadOnly="True"
Focusable="False"/>
IsReadOnly="True" works, but I don't know why Focusable="False" simply doesn't work.
<avalonEdit:TextEditor.Resources>
<Style TargetType="{x:Type avalonEdit:TextArea}">
<Setter Property="Focusable" Value="False"/>
</Style>
</avalonEdit:TextEditor.Resources>
You can see here: https://github.com/icsharpcode/AvalonEdit/blob/master/ICSharpCode.AvalonEdit/TextEditor.xaml

Passing DataContext in Telerik RadGridView

I use c# .NET 4.5 and WPF RadControls from Telerik.
On my MainWindow I have a RadTabControl and in my code behind I bind my MainViewModel like this:
this.DataContext = new MainViewmodel();
The ItemSource of the RadTabControl is bound in XAML:
<telerik:RadTabControl ... ItemsSourc={Binding Tabs} .. />
I also use a ContentSelector to load different Contents to my Tabs. These Contents are UserControls. On one UserControl I use a RadGRidView with it's own ItemsSource that I bind in the code behind:
TestGridView.ItemsSource = Tasks.GetTasks();
The RadGridView Columns bound to it's own style:
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn DataMemberBinding="{Binding ID}" Width="*" CellStyle="{StaticResource CellStyle}" />
</telerik:RadGridView.Columns>
<Style x:Key="CellStyle" TargetType="{x:Type telerik:GridViewCell}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="#f2f2f2" BorderThickness="0,0,0,2" Padding="0,5,0,5">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" Margin="10,0,0,0" VerticalAlignment="Top">
<TextBlock Text="{Binding Titel}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Start}" Foreground="#9fa2ae"/>
<TextBlock Text=" XXX - XXX " />
<TextBlock Text="{Binding Startzeit}" Foreground="#9fa2ae" />
<telerik:RadButton Height="30" Content="Right Button" Command="{Binding AddTabCommand}" CommandParameter="Tab9999"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The Problem is that the RadButton does not fire the DelegateCommand of my MainViewModel. I have also the same Button in the UserControl out of the RadGridView, this works fine.
Please can somebody tell me how I can fix this problem of my RadButton in the RadGridView?
Thanks a lot
Best Regards
RR
PS: I have a simple project, but can't attach it
The reason why this is happening is that the binding on your RadButton is trying to find the AddTabCommand on the DataContext of the button, not the parent Window.
To fix this, I would advise setting the style inside the Window's resources, and instead of using this:
Command="{Binding AddTabCommand}"
Give the Window a name, and use this:
Command="{Binding ElementName=windowName, Path=DataContext.AddTabCommand}"
Agree with what Mike said its not finding AddTabCommand in your DataContext(ViewModel).
You can try with specifying whole path of the command :
Command="{Binding ElementName=windowName, Path=NameSapce_Name.ViewModelName.AddTabCommand}".

Can I set ToolBar items in XAML?

Feel free to suggest an alternate approach to my problem if this isn't the best way to go about it.
I have a ToolBarTray and a TreeView. The tree has 2 items that are Concrete1 and Concrete2 classes respectively. I want the toolbar to have a different menu depending on which type of item is selected in the tree.
<ToolBarTray DockPanel.Dock="Top">
<ToolBar>
<ToolBar.Style>
<Style TargetType="{x:Type ToolBar}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=tree, Path=SelectedItem, Converter={StaticResource convert}}" Value="{x:Type root:Concrete1}">
<!--what do i do here??-->
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=tree, Path=SelectedItem, Converter={StaticResource convert}}" Value="{x:Type root:Concrete2}">
<!--what do i do here??-->
</DataTrigger>
</Style.Triggers>
</Style>
</ToolBar.Style>
<ToolBar.Resources>
<Menu x:Key="awd">
<MenuItem Header="AWD"></MenuItem>
</Menu>
<Menu x:Key="dwa">
<MenuItem Header="DWA"></MenuItem>
</Menu>
</ToolBar.Resources>
</ToolBar>
</ToolBarTray>
<TreeView x:Name="tree" ItemsSource="{Binding Families}"></TreeView>
I've gotten as far as being able to set any regular property (background, etc) of the toolbar depending on which item is selected. I don't know how to proceed to add specific Menus to the toolbar.
I think I've figured it out. I've only done this with a ContextMenu and outside of a style trigger but I imagine it would be the same principle.
<TreeView>
<TreeView.ContextMenu>
<ContextMenu>
<StaticResourceExtension ResourceKey="myMenuItem"></StaticResourceExtension>
</ContextMenu>
</TreeView.ContextMenu>
</TreeView>

Categories

Resources