They say, A Picture is Worth a Thousand Words.
I have a custom control called RichTextBoxEditor:
Here is the XAML:
<UserControl x:Class="WpfRichText.Ex.Controls.RichTextEditor" x:Name="uxRichTextEditor"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:asis="clr-namespace:WpfRichText.Ex.AttachedProperties">
<Grid >
<!-- Set the styles for the tool bar. -->
<Grid.Resources>
<Style TargetType="{x:Type Button}" x:Key="formatTextStyle">
<Setter Property="FontFamily" Value="Palatino Linotype"></Setter>
<Setter Property="Width" Value="30"></Setter>
<Setter Property="FontSize" Value ="14"></Setter>
<Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>
</Style>
<Style TargetType="{x:Type ToggleButton}" x:Key="formatTextStyle2">
<Setter Property="FontFamily" Value="Palatino Linotype"></Setter>
<Setter Property="Width" Value="30"></Setter>
<Setter Property="FontSize" Value ="14"></Setter>
<!--<Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>-->
</Style>
<Style TargetType="{x:Type Button}" x:Key="formatImageStyle">
<Setter Property="Width" Value="30"></Setter>
<!--<Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>-->
</Style>
</Grid.Resources>
<DockPanel Name="mainPanel">
<!-- This tool bar contains all the editing buttons. -->
<ToolBar Height="30" DockPanel.Dock="Top" ToolBarTray.IsLocked="True">
<Button Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleBold" ToolTip="Bold">
<TextBlock FontWeight="Bold">B</TextBlock>
</Button>
<Button Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleItalic" ToolTip="Italic">
<TextBlock FontStyle="Italic" FontWeight="Bold">I</TextBlock>
</Button>
<ToggleButton Style="{StaticResource formatTextStyle2}" x:Name="ToolStripButtonStrikeout" ToolTip="Strikethrough" Click="ToolStripButtonStrikeout_Click" Foreground="Black" Width="19" Height="19">
<ToggleButton.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/Strikeout.png"/>
</ToggleButton.Background>
</ToggleButton>
<Button x:Name="Tool_Link" Style="{StaticResource formatImageStyle}" ToolTip="Link" Click="Tool_Link_Click" Width="30" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/Link.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Spoiler" Style="{StaticResource formatImageStyle}" ToolTip="Spoiler" Width="30" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/Spoiler.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Image" Style="{StaticResource formatImageStyle}" ToolTip="Image" Height="19">
<Button.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/Images.png" Stretch="Uniform"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Video" Style="{StaticResource formatImageStyle}" ToolTip="Youtube video" Margin="0,1,0,-1" Height="19">
<Button.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/Video.png" Stretch="Uniform"/>
</Button.Background>
</Button>
<Button x:Name="Tool_ALeft" Style="{StaticResource formatImageStyle}" ToolTip="Align Left" Height="19" Width="30">
<Button.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/paragraphleftjustify.png" Stretch="Uniform"/>
</Button.Background>
</Button>
<Button x:Name="Tool_ACenter" Style="{StaticResource formatImageStyle}" ToolTip="Align Center" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/paragraphcenterjustify.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Header" Style="{StaticResource formatImageStyle}" ToolTip="Header" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/charactergrowfont.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Quote" Style="{StaticResource formatImageStyle}" ToolTip="Quote" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/quote.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Code" Style="{StaticResource formatImageStyle}" ToolTip="Decrease Indent" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/code.png"/>
</Button.Background>
</Button>
</ToolBar>
<StackPanel >
<RichTextBox Name="mainRTB" AcceptsTab="True" Height="160"
asis:RichTextboxAssistant.BoundDocument="{Binding Path=Text, ElementName=uxRichTextEditor}"
VerticalScrollBarVisibility="Visible" Width="365" />
<!--<TextBox Text="{Binding Path=Text, ElementName=uxRichTextEditor}" Height="25" />-->
</StackPanel>
</DockPanel>
</Grid>
This control originally was taken from the net, which i forgot where it is. But then i modified some component of it. It was fine while in Designer, but when i put it on the main window, it will look like this:
Here is some information that may useful:
Thanks in Advance :)
EDIT:
Here is the original XAML:
<UserControl
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"
xmlns:RTFEditor="clr-namespace:RTFEditor"
mc:Ignorable="d"
x:Class="RTFEditor.RTFBox"
x:Name="RTFEditor"
d:DesignWidth="600" d:DesignHeight="600" Loaded="RTFEditor_Loaded">
<UserControl.Resources>
<ObjectDataProvider x:Key="FontListKlasse" d:IsDataSource="True" ObjectType="{x:Type RTFEditor:FontList}"/>
<ObjectDataProvider x:Key="FontHeightKlasse" d:IsDataSource="True" ObjectType="{x:Type RTFEditor:FontHeight}"/>
</UserControl.Resources>
<DockPanel>
<ToolBar x:Name="ToolBarOben" DockPanel.Dock="Top">
<Button x:Name="ToolStripButtonOpen" Click="ToolStripButtonOpen_Click">
<Image Source="Images\Open.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonPrint" Click="ToolStripButtonPrint_Click">
<Image Source="Images\Print.png" Stretch="None"/>
</Button>
<Separator/>
<Button x:Name="ToolStripButtonCut" Command="ApplicationCommands.Cut" ToolTip="Cut">
<Image Source="Images\Cut.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonCopy" Command="ApplicationCommands.Copy" ToolTip="Copy">
<Image Source="Images\Copy.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonPaste" Command="ApplicationCommands.Paste" ToolTip="Paste">
<Image Source="Images\Paste.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonUndo" Command="ApplicationCommands.Undo" ToolTip="Undo">
<Image Source="Images\Undo.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonRedo" Command="ApplicationCommands.Redo" ToolTip="Redo">
<Image Source="Images\Redo.png" Stretch="None"/>
</Button>
<Separator/>
<ComboBox x:Name="Fonttype" ItemsSource="{Binding Mode=OneWay, Source={StaticResource FontListKlasse}}" DropDownClosed="Fonttype_DropDownClosed" />
<ComboBox x:Name="Fontheight" ItemsSource="{Binding Mode=OneWay, Source={StaticResource FontHeightKlasse}}" DropDownClosed="Fontheight_DropDownClosed" />
</ToolBar>
<ToolBar x:Name="ToolBarUnten" DockPanel.Dock="Top">
<ToggleButton x:Name="ToolStripButtonBold" Command="EditingCommands.ToggleBold" ToolTip="Bold">
<Image Source="Images\Bold.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonItalic" Command="EditingCommands.ToggleItalic" ToolTip="Italic">
<Image Source="Images\Italic.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonUnderline" Command="EditingCommands.ToggleUnderline" ToolTip="Underline">
<Image Source="Images\Underline.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonStrikeout" ToolTip="Strikeout" Click="ToolStripButtonStrikeout_Click">
<Image Source="Images\Strikeout.png" Stretch="None"/>
</ToggleButton>
<Separator/>
<Button x:Name="ToolStripButtonTextcolor" Click="ToolStripButtonTextcolor_Click">
<Image Source="Images\Textcolor.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonBackcolor" Click="ToolStripButtonBackcolor_Click">
<Image Source="Images\Backcolor.png" Stretch="None"/>
</Button>
<Separator/>
<ToggleButton x:Name="ToolStripButtonAlignLeft" Command="EditingCommands.AlignLeft" ToolTip="Align Left" Click="ToolStripButtonAlignLeft_Click">
<Image Source="Images\AlignLeft.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonAlignCenter" Command="EditingCommands.AlignCenter" ToolTip="Align Center" Click="ToolStripButtonAlignCenter_Click">
<Image Source="Images\AlignCenter.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonAlignRight" Command="EditingCommands.AlignRight" ToolTip="Align Right" Click="ToolStripButtonAlignRight_Click">
<Image Source="Images\AlignRight.png" Stretch="None"/>
</ToggleButton>
<Separator/>
<Button x:Name="ToolStripButtonBulletList" Command="EditingCommands.ToggleBullets" ToolTip="Bullets">
<Image Source="Images\BulletList.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonNumbersList" Command="EditingCommands.ToggleNumbering" ToolTip="Numbers">
<Image Source="Images\NumbersList.png" Stretch="None"/>
</Button>
<Separator/>
<Button x:Name="ToolStripButtonIndent" Command="EditingCommands.IncreaseIndentation" ToolTip="Increase Indent">
<Image Source="Images\Indent.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonIndentDelete" Command="EditingCommands.DecreaseIndentation" ToolTip="Decrease Indent">
<Image Source="Images\IndentRemove.png" Stretch="None"/>
</Button>
<Separator/>
<ToggleButton x:Name="ToolStripButtonSubscript" ToolTip="Subscript" Click="ToolStripButtonSubscript_Click">
<Image Source="Images\Subscript.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonSuperscript" ToolTip="Superscript" Click="ToolStripButtonSuperscript_Click">
<Image Source="Images\Superscript.png" Stretch="None"/>
</ToggleButton>
</ToolBar>
<StatusBar x:Name="StatusBar" DockPanel.Dock="Bottom">
<StatusBarItem>
<Label x:Name="LabelZeileNr" Content="ZeileNr" BorderThickness="1" BorderBrush="DarkGray" />
</StatusBarItem>
<StatusBarItem >
<Label x:Name="LabelSpalteNr" Content="SpalteNr" BorderThickness="1" BorderBrush="DarkGray"/>
</StatusBarItem>
<StatusBarItem>
<Label x:Name="LabelEinfg" Content="Einfg" BorderThickness="1" BorderBrush="DarkGray" />
</StatusBarItem>
<StatusBarItem DockPanel.Dock="Right" Width="100">
<Slider x:Name="SliderZoom" Grid.Column="1" Width="100" Ticks="1, 2, 3, 4, 5, 6, 7, 8, 9, 10" Value="1" Delay="100" Interval="5" TickPlacement="BottomRight" Minimum="1" Maximum="10" ValueChanged="SliderZoom_ValueChanged" HorizontalContentAlignment="Left" />
</StatusBarItem>
</StatusBar>
<RichTextBox x:Name="RichTextControl" SpellCheck.IsEnabled="True" VerticalScrollBarVisibility="Auto" AcceptsReturn="True" AcceptsTab="True" SelectionChanged="RichTextControl_SelectionChanged" TextChanged="RichTextControl_TextChanged" KeyDown="RichTextControl_KeyDown" KeyUp="RichTextControl_KeyUp" />
</DockPanel>
EDIT 2nd:
If im not mistaken here is what i have done:
Added my custom images to the project resource (Linked at compile; Resource)
Changed the source of the image of each button (Except Bold & Italic)
I will update this section if i remember anything else!
More Info:
I tried to copy-paste the original XAML without modifying it. When i use it in the main window, it works! But, all images of the buttons are not showing (except Bold and Italic since they dont use any image).
RichTextEditor.xaml.cs :
namespace WpfRichText.Ex.Controls
{
/// <summary>
/// Interaction logic for BindableRichTextbox.xaml
/// </summary>
public partial class RichTextEditor : UserControl
{
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(RichTextEditor),
new PropertyMetadata(string.Empty));
public RichTextEditor()
{
InitializeComponent();
}
public string Text
{
get { return GetValue(TextProperty) as string; }
set {
SetValue(TextProperty, value);
}
}
private void ToolStripButtonStrikeout_Click(object sender, RoutedEventArgs e)
{
TextRange range = new TextRange(mainRTB.Selection.Start, mainRTB.Selection.End);
TextDecorationCollection tdc = (TextDecorationCollection)mainRTB.Selection.GetPropertyValue(Inline.TextDecorationsProperty);
if (tdc == null || !tdc.Equals(TextDecorations.Strikethrough))
{
tdc = TextDecorations.Strikethrough;
}
else
{
tdc = new TextDecorationCollection();
}
range.ApplyPropertyValue(Inline.TextDecorationsProperty, tdc);
}
private void Tool_Link_Click(object sender, RoutedEventArgs e)
{
}
}
}
Related
How to change txtPIN.Text value in C# code behind after UserControl was initialized.
Here is XAML
<Button x:Name="btn_pin" Content="Change PIN" Click="button_Click" Foreground="White">
<Button.Template>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/images/settings/lock.png" Stretch="UniformToFill" Width="16" Height="16"/>
<TextBlock x:Name="txtPin" Text="Change PIN" Foreground="White" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
and C#
public MyUserControl()
{
this.InitializeComponent();
this.btn_pin.??????????
}
You're not doing it the right way, just fix your xaml (I changed the Text binding of your TextBlock):
<Button x:Name="btn_pin" Content="Change PIN" Click="button_Click" Foreground="White">
<Button.Template>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/images/settings/lock.png" Stretch="UniformToFill" Width="16" Height="16"/>
<TextBlock x:Name="txtPin" Text="{TemplateBinding Content}" Foreground="White" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
and every time you want to change the text, change the Content of the button like this:
public MainPage()
{
this.InitializeComponent();
btn_pin.Content = "New label";
}
I am beginning to learn WPF and I choose MahApps.Metro for styling as it looked cool. The problem I am facing is that after changing the font of MetroWindow the WindowCommandButton's font is updated accordingly but the font of the buttons is not getting updated. I continue to see tiny texted buttons.
My XAML looks like this as of now
<MahApps:MetroWindow
x:Class="MetroSample.MainWindow"
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"
xmlns:local="clr-namespace:MetroSample"
xmlns:MahApps="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
mc:Ignorable="d"
Title="Metro Sample"
Height="350" Width="525"
WindowStartupLocation="CenterScreen"
GlowBrush="{DynamicResource AccentColorBrush}" FontFamily="Lucida Sans Unicode" FontSize="14.667">
<MahApps:MetroWindow.RightWindowCommands>
<MahApps:WindowCommands>
<Button x:Name="btnReqLogs">
<StackPanel Orientation="Horizontal">
<Rectangle Width="20" Height="20" Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_book_list}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="Request Logs" />
</StackPanel>
</Button>
<Button x:Name="btnSettings">
<StackPanel Orientation="Horizontal">
<Rectangle Width="20" Height="20" Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_settings}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="Settings" />
</StackPanel>
</Button>
</MahApps:WindowCommands>
</MahApps:MetroWindow.RightWindowCommands>
<DockPanel LastChildFill="True">
<DockPanel Height="50" DockPanel.Dock="Top" LastChildFill="False">
<Button DockPanel.Dock="Left"
MahApps:ButtonHelper.PreserveTextCase="True" Background="Transparent"
Content="First Button" Padding="10,0" Width="150" Margin="0,0,2,0"/>
<Button DockPanel.Dock="Left"
MahApps:ButtonHelper.PreserveTextCase="True" Background="Transparent"
Content="Second Button" Padding="10,0" Width="150" Margin="0,0,2,0"/>
<Button DockPanel.Dock="Right"
MahApps:ButtonHelper.PreserveTextCase="True" Background="Transparent"
Content="Logout" Padding="10,0" Width="150" Margin="0,0,2,0"/>
</DockPanel>
<StackPanel>
</StackPanel>
</DockPanel>
Button.FontFamily doesn't inherit from parent control. It is defined in the base style :
<Setter Property="FontFamily" Value="{DynamicResource DefaultFont}" />
You can override that with the following :
<Style BasedOn="{StaticResource MetroButton}" TargetType="Button">
<Setter Property="FontFamily" Value="Lucida Sans Unicode" />
</Style>
Or, you can override that globally for every style that also happens to use it via (but, don't do this) :
<FontFamily x:Key="DefaultFont">Lucida Sans Unicode</FontFamily>
The text that is in the MenuItem Header is getting a hidden part, as shown in the image below. The full text is "Informações de Pagamento", but the rest is hidden. I need this component to be this size, width =240
My axml file:
<Image.ContextMenu>
<ContextMenu HorizontalAlignment="Left" Width="240">
<MenuItem x:Name="infoPagamento" Header="_Informações de Pagamento" Cursor="Hand" ToolTip="Online" Click="statusOn_Click" Background="White" Margin="5" >
<MenuItem.Icon>
<Image Source="../Imagens/icons/menuusuario/icon_financeiro.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="alteracaoPlano" Header="Alteração de plano" Cursor="Hand" ToolTip="Alteração de plano" Click="statusAusente_Click" Background="White" Margin="5">
<MenuItem.Icon>
<Image Source="../Imagens/icons/menuusuario/icon_tarefa.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="Relatorios" Header="Relatórios" Cursor="Hand" ToolTip="Ocupado" Click="statusOcupado_Click" Background="White" Margin="5">
<MenuItem.Icon>
<Image Source="../Imagens/icons/menuusuario/icon_relatorios.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="Ajuda" Header="Ajuda" Cursor="Hand" ToolTip="Offline" Click="statusOff_Click" Background="White" Margin="5">
<MenuItem.Icon>
<Grid>
<Ellipse Width="20" Height="20" Fill="#48026E" />
<Label Content="?" Padding="0"
VerticalAlignment="Center" HorizontalAlignment="Center"
Foreground="White" FontSize="14" Cursor="Hand"/>
</Grid>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</Image.ContextMenu>
My Resource:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type ContextMenu}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<Border x:Name="Border"
Background="White"
BorderThickness="1" BorderBrush="Transparent"
Margin="3" CornerRadius="10">
<StackPanel IsItemsHost="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I had similar problem for Menu with drop down style. The problem is in reserved space for shortcut like CTRL+D (input gesture text). To overcome limitation I had to set menu item width to fixed size, override menuitem header with text block, set its width to auto (fixed width did not work like expected) and set negative margin for textblock (its size can be different for your problem).
Some short example:
<Menu IsMainMenu="True" Height="auto" Width="220" Margin="0" VerticalAlignment="Center" VerticalContentAlignment="Stretch" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch">
<MenuItem BorderThickness="0" Width="220" Margin="0" VerticalAlignment="Center" VerticalContentAlignment="Stretch" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch">
<MenuItem.Icon>
<Ellipse Width="25" Height="25" HorizontalAlignment="Center" Stretch="Uniform">
<Ellipse.Fill>
<ImageBrush x:Name="imgAvatar" ImageSource="..." TileMode="Tile" Stretch="UniformToFill" />
</Ellipse.Fill>
</Ellipse>
</MenuItem.Icon>
<MenuItem.Header>
<TextBlock Text="Some long long text" Width="auto" TextWrapping="Wrap" Margin="0,0,-75,0" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left"/>
</MenuItem.Header>
<MenuItem BorderThickness="0" Width="220" Margin="0" VerticalAlignment="Center" VerticalContentAlignment="Stretch" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch">
<MenuItem.Icon>
<Ellipse Width="25" Height="25" HorizontalAlignment="Center" Stretch="Uniform">
<Ellipse.Fill>
<ImageBrush x:Name="imgAvatar" ImageSource="..." TileMode="Tile" Stretch="UniformToFill" />
</Ellipse.Fill>
</Ellipse>
</MenuItem.Icon>
<MenuItem.Header>
<TextBlock Text="Some long long text 2" Width="auto" TextWrapping="Wrap" Margin="0,0,-75,0" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left"/>
</MenuItem.Header>
</MenuItem>
</MenuItem>
</Menu>
Try setting the width of MenuItem as "Auto"
I have a WPF Application with a Ribbon Control. I want to add a ComboBox, to show the logged in user next to the help button. But when I try to add the ComboBox, it is created as a Tab.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Ribbon x:Name="RibbonWin" SelectedIndex="0" Margin="0,0,0,113">
<Ribbon.HelpPaneContent>
<RibbonButton SmallImageSource="Images\help.png"></RibbonButton>
</Ribbon.HelpPaneContent>
<RibbonComboBox>
<ComboBoxItem Content="Test1"/>
</RibbonComboBox>
<RibbonTab Header="Home" KeyTip="H" Margin="0,0,0,-1" >
<RibbonGroup x:Name="ClipboardGroup" Header="Clipboard">
<RibbonMenuButton LargeImageSource="Images\paste.jpg" Label="Paste" KeyTip="V">
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Keep Text Only" KeyTip="T"/>
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Paste Special..." KeyTip="S"/>
</RibbonMenuButton>
<RibbonButton SmallImageSource="Images\cut.jpg" Label="Cut" KeyTip="X" />
<RibbonButton SmallImageSource="Images\copy.jpg" Label="Copy" KeyTip="C" />
</RibbonGroup>
<RibbonGroup x:Name="Questions" Header="Questions And Answers">
<RibbonMenuButton LargeImageSource="Images\Question.jpg" Label="Questions" KeyTip="V">
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Add Question" KeyTip="T"/>
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Paste Special..." KeyTip="S"/>
</RibbonMenuButton>
<RibbonButton SmallImageSource="Images\Save.jpg" Label="Save" KeyTip="X" />
<RibbonButton SmallImageSource="Images\Add.jpg" Label="Add" KeyTip="C" />
</RibbonGroup>
</RibbonTab>
<RibbonTab Header="Insert" KeyTip="I">
</RibbonTab>
<RibbonTab Header="PageLayout" KeyTip="L">
</RibbonTab>
</Ribbon>
</Grid>
Also is there a way to remove the the Application Menu ComboBox on the left that is created by default.
Put a RibbonApplicationMenu into the ApplicationMenu-property and set its Visibility to 'Collapsed'. This will not remove the application menu, but at least it is not longer visible. There is not other way to hide it.
The ComboBox must be inserted into a RibbonTab, so a RibbonTab will be created implicitly if you do not specify anyone.
The following example demonstrates how to hide the application menu and insert a combo box:
<Ribbon>
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu Visibility="Collapsed"></RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<RibbonTab>
<RibbonGroup>
<RibbonComboBox></RibbonComboBox>
</RibbonGroup>
</RibbonTab>
</Ribbon>
I got it from my friend,
this might help you
Create your own template and add it to Ribbon HelpPaneContentTempalte
<Ribbon.HelpPaneContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="24">
<ToggleButton x:Name="btn" >
<TextBlock Text="Operator"/>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=btn}" x:Name="Popup" StaysOpen="False" Placement="Bottom"
PlacementTarget="{Binding ElementName=btn}" Height="120" Width="150" HorizontalOffset="-90" >
<Popup.Resources>
<Style x:Key="LinkButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock>
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Popup.Resources>
<Border BorderBrush="Gray" BorderThickness="2" Background="White" >
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Height="50">
<Image Source="Images\UserPhoto.png" Height="30"/>
<StackPanel VerticalAlignment="Center">
<TextBlock Text="Operator" FontSize="16" Margin="10,0,0,0"/>
<TextBlock Text="Operator#xxx.com" FontSize="10" Foreground="DarkGray" Margin="10,0,0,0"/>
</StackPanel>
</StackPanel>
<Separator Background="LightGray"/>
<StackPanel Height="30">
<Button x:Name="btnAccountSettings" Content="Account Settings" Style="{StaticResource LinkButton}" Width="100" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"></Button>
</StackPanel>
<Separator Background="LightGray"/>
<StackPanel Height="30">
<Button x:Name="btnSwitchAccount" Content="Switch Account" Style="{StaticResource LinkButton}" Width="100" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"></Button>
</StackPanel>
</StackPanel>
</Border>
</Popup>
<ContentPresenter Content="{TemplateBinding Property= ContentControl.Content}" />
</StackPanel>
</DataTemplate>
</Ribbon.HelpPaneContentTemplate>
<Ribbon.HelpPaneContent>
<RibbonButton x:Name="btnHelp" SmallImageSource="Images\help.png" />
</Ribbon.HelpPaneContent>
I am working on wpf animation.
I need to Translate a stackpanel inside the grid from left to right.
It starts its translation from behind the grid.its work but some part of stackpanel crop by the grid.
If increase the width i can see the full of stack panel.How can solve this issue without increasing the width of Grid.
Here is my code :
<Grid x:Name="OuterGrid">
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/home_bg#2x.png"></ImageBrush>
</Grid.Background>
<Grid x:Name="imgBase" Opacity="0">
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/Resources/Images/AboutBasheer/Characters/kadapath_bg#2x.jpg"></ImageBrush>
</Grid.Background>
</Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,-10,0,0" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="Margin" Value="30"/>
</Style>
</StackPanel.Resources>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon1#2x.png" Width="101" Height="86" x:Name="topItem1" MouseLeftButtonDown="topItem1_MouseLeftButtonDown">
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon2#2x.png" Width="145" Height="86" x:Name="topItem2" MouseLeftButtonDown="topItem2_MouseLeftButtonDown">
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon3#2x.png" Width="172" Height="86" x:Name="topItem3" >
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon4#2x.png" Width="96" Height="86" x:Name="topItem4" >
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon5#2x.png" Width="139" Height="86" x:Name="topItem5" >
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon6#2x.png" Width="139" Height="86" x:Name="topItem6" >
</Image>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" x:Name="AllCharacters" Opacity="0">
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/aanavari#2x.png" Width="256" Height="432" x:Name="imgRaman" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/kochutrasia#2x.png" Width="256" Height="432" x:Name="imgThreysya" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/ponkurishe_thoma#2x.png" Width="256" Height="432" x:Name="imgKurish" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/synaba#2x.png" Width="256" Height="432" x:Name="imgSynaba" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/moothappa#2x.png" Width="256" Height="432" x:Name="imgMandan" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/thorappan#2x.png" Width="256" Height="432" x:Name="imgThorappan" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/naanu#2x.png" Width="256" Height="432" x:Name="imgnanu" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/pappuni#2x.png" Width="256" Height="432" x:Name="imgdriver" />
<StackPanel.RenderTransform>
<TransformGroup>
<TranslateTransform X="1500" Y="0"></TranslateTransform>
</TransformGroup>
</StackPanel.RenderTransform>
</StackPanel>
<Grid VerticalAlignment="Bottom" HorizontalAlignment="Center" x:Name="bottombar" Width="1366" >
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/book_menubg#2x.png"/>
</Grid.Background>
<Grid.RenderTransform>
<TranslateTransform Y="117" />
</Grid.RenderTransform>
<Button Width="104" Height="65" HorizontalAlignment="Right" Margin="0,-120,20,80" Style="{StaticResource MyButtonStyle}" Click="Button_Click">
<Button.Background>
<ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/main_menuButton#2x.png" />
</Button.Background>
</Button>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20,0,0">
<StackPanel.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="Margin" Value="20"/>
</Style>
</StackPanel.Resources>
<Image Source="pack://application:,,,/Resources/Images/Home/aboutBasheerIcon#2x.png" Width="84" Height="73" x:Name="item1" />
<Image Source="pack://application:,,,/Resources/Images/Home/kithikalIcon#2x.png" Width="88" Height="75" x:Name="item2"/>
<Image Source="pack://application:,,,/Resources/Images/Home/kathakalKaanamIcon#2x.png" Width="135" Height="74" x:Name="item3"/>
<Image Source="pack://application:,,,/Resources/Images/Home/NighanduIcon#2x.png" Width="78" Height="71" x:Name="item4"/>
<Image Source="pack://application:,,,/Resources/Images/Home/kathakalKelkaamIcon#2x.png" Width="150" Height="78" x:Name="item5"/>
</StackPanel>
</Grid>
</Grid>