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"
Related
i'm making a simple WPF application and i'm facing a problem.
I have a StackPanel that contain a Menu and a StackPanel and i'm trying to align certains MenuItem to right but with no success...
I trying to do something like that :
===================================================
FILE .....................................................REDUCE MINIMIZE CLOSE --->MENU
APPTITLE ---------------------------------------------> Stackpanel
There is another StackPanel that contain both elements to align them Vertically
I tried differents way, with my menu item in a stackpanel or dockpanel...
Here is my MainWindow.xaml :
<StackPanel Orientation="Vertical">
<Menu materialDesign:RippleAssist.IsDisabled="True" Name="menu" Height="40" Foreground="#FF060000" BorderBrush="#FFED0303">
<MenuItem HorizontalAlignment="Center" VerticalAlignment="Center" Header="_Fichier">
<MenuItem Header="_Quitter" Click="ExitButton_Click">
<MenuItem.Icon>
<Image Source="assets/images/quitter.png"></Image>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem Click="minimize_Click" Height="15" Width="19" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,5">
<MenuItem.Background>
<ImageBrush ImageSource="assets/images/minimize.png"/>
</MenuItem.Background>
</MenuItem>
<MenuItem Click="maximize_Click" Height="15" Width="19" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="11,10,0,0">
<MenuItem.Background>
<ImageBrush x:Name="resizeImage" ImageSource="{Binding ResizeImagePath}"/>
</MenuItem.Background>
</MenuItem>
<MenuItem Click="ExitButton_Click" Height="20" Width="19" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="11,10,0,0">
<MenuItem.Background>
<ImageBrush ImageSource="assets/images/close.png"/>
</MenuItem.Background>
</MenuItem>
</Menu>
<StackPanel Orientation="Horizontal" Margin="0,14,0,0" VerticalAlignment="Center">
<Button Margin="10,0,0,0" Click="scanNetwork_Click" BorderBrush="{x:Null}">
<Button.Background>
<ImageBrush ImageSource="assets/images/756363-200.png"/>
</Button.Background>
</Button>
<TextBlock Text="Machine Sniffer" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="24" FontWeight="Bold" FontFamily="{DynamicResource MaterialDesignFont}" Foreground="White" Margin="10,0,0,0"></TextBlock>
</StackPanel>
</StackPanel>
The actual result is something like that :
===================================================
FILE REDUCE MINIMIZE CLOSE --->MENU
APPTITLE ---------------------------------------------> Stackpanel
Thanks for help
In StackPanel you are not able to adjust items to te right like you are doing, they not allow alignment in the direction in which they stack.
You can use a Grid or a DockPanel instead:
Example with DockPanel:
<DockPanel Width="300">
<!-- place menu items here and use the VerticalAlignment property like you're doing -->
</DockPanel>
Example with Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- place elements here and indicate respective column -->
</Grid>
I need to create a custom style for MenuItem with a set of ControlTemplate per each MenuItem Role. So, I decided to use this approach from msdn
But, there's one problem - I want to get the same appearance in Popup.
Unfortunately, the appearance is different like on the picture below:
Example of code:
<Window x:Class="ExporerSubMenu.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:ExporerSubMenu"
mc:Ignorable="d"
Title="MainWindow" Height="400" Width="1000">
<Window.Resources>
<!-- Copy all styles for MenuItem ControlTemplate and Brushes -->
<!-- https://msdn.microsoft.com/fr-fr/library/ms747082(v=vs.85).aspx -->
</Window.Resources>
<Grid Background="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBox Text="Local (right click)" FontSize="16" Grid.Column="0">
<TextBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Restore...">
<MenuItem Header="to desktop" />
<MenuItem Header="to another folder" />
<MenuItem Header="db schema and data..." />
</MenuItem>
<MenuItem Header="to .bac file">
<MenuItem Header="to desktop" />
<MenuItem Header="to another folder" />
</MenuItem>
<MenuItem Header="to db files">
<MenuItem Header="to desktop" />
<MenuItem Header="to another folder" />
</MenuItem>
<MenuItem Header="Export data">
<MenuItem Header="db schema to desktop" />
<MenuItem Header="db schema and data..." />
</MenuItem>
<MenuItem Header="Remove" />
</ContextMenu>
</TextBox.ContextMenu>
</TextBox>
</Grid>
</Window>
Now, I have only one solution - to draw rectangles (from Blend)
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" HorizontalOffset="-2" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right" VerticalOffset="-3">
<Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
<Border x:Name="SubMenuBorder" BorderBrush="#FF959595" BorderThickness="1" Background="WhiteSmoke">
<ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid x:Name="Grid2" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="Canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="WhiteSmoke" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<Rectangle x:Name="Rectangle" Fill="#FFF1F1F1" HorizontalAlignment="Left" Margin="1,2" RadiusY="2" RadiusX="2" Width="28"/>
<Rectangle x:Name="Rectangle1" Fill="#FFE2E3E3" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
<Rectangle x:Name="Rectangle2" Fill="White" HorizontalAlignment="Left" Margin="30,2,0,2" Width="1"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
Is there any another solution to solve this ?
I wish to display a ToolTip for an entry in a Listbox.
The Toolkit will contain a Textbox and a copy (larger) of the Image in the entry in the Listbox
I can get either the Text in the Textbox Or the Image to display.
The code which displays the image but not the text is
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="#EEFFFFFF" BorderBrush="#FFCCCCCC"
HorizontalAlignment="Center" VerticalAlignment="Center"
BorderThickness="1">
<Grid>
<StackPanel Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Image x:Name="img" ToolTipService.Placement="Top"
Source="{Binding Path=ImageUri}" Height="64" Stretch="Uniform" Width="64">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="scaleTrans"/>
</TransformGroup>
</Image.RenderTransform>
<Image.ToolTip>
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center" Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
This code is part of the code for which is used by a ListBox
The code below (as in the list above display the Image in the tooltip but not the Textbox
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center"Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
If you remove
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}" from <ToolTip
The Text works as expected but the Image now fails (as expected)
I have tried to
a) modify the original so the TextBlock binding point to the FTitle entry observable Collection driving the listbox entries
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=DataContext.FTitle, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
b) moved the datacontext in to Image
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=DataContext.Source, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Image}}}"/>
</Border>enter code here
Neither worked. (I did try many variations But none worked.
I would be grateful for either solution
{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}} will bind the UIElement (a ListBoxItem) as the DataContext for the tooltip. It seems you want the DataContext of the ListBoxItem in order to bind to properties of the underlying model. In which case, try changing your DataContext binding to be: {Binding Path=PlacementTarget.DataContext, RelativeSource={x:Static RelativeSource.Self}}
I'm new in WPF and I can not work this one out hope you guys could help on this. The problem is that the DesignerItemTemplate is not working when its in the item control, I have try to use this directly to one item I can drag it around. Forgive me if the code look messy. Thanks in advance
<UserControl.Resources>
<ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type s:MoveThumb}">
<Rectangle Fill="Transparent" />
</ControlTemplate>
<!-- ResizeDecorator Template -->
<ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
<Grid>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Height="15" Width="130" Margin="0,-15,-81,0" IsHitTestVisible="False">
<TextBox Text="R101" BorderBrush="Transparent" IsHitTestVisible="False" Background="Transparent" Height="17" FontSize="7" Foreground="#FF6DF90C" VerticalContentAlignment="Stretch" MinHeight="1" HorizontalAlignment="Stretch" CharacterCasing="Upper" />
</StackPanel>
<s:ResizeThumb Height="1" Cursor="SizeNS" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<s:ResizeThumb Width="1" Cursor="SizeWE" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="1" Cursor="SizeWE" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
<s:ResizeThumb Height="1" Cursor="SizeNS" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNWSE" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNESW" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Right"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNESW" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNWSE" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
<!-- Designer Item Template-->
<ControlTemplate x:Key="DesignerItemTemplate" TargetType="{x:Type ContentControl}">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<s:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll"/>
<Control Template="{StaticResource ResizeDecoratorTemplate}"/>
<ContentPresenter Content="{TemplateBinding Content}"/>
</Grid>
</ControlTemplate>
</UserControl.Resources>
<panZoom:PanAndZoomViewer x:Name="panZoomViewer" Margin="2,2,2,45" ClipToBounds="True">
<!--<Canvas>-->
<Canvas x:Name="cnvImage" Background="Transparent">
<Image x:Name="imgCurrent" VerticalAlignment="Center" HorizontalAlignment="Center" />
<ItemsControl ItemsSource="{Binding InspectionItemList,Mode=TwoWay }">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Canvas.Top="{Binding Y,Mode=TwoWay}" Canvas.Left="{Binding X,Mode=TwoWay }"
Width="{Binding Width,Mode=TwoWay}" MinWidth="1"
Height="{Binding Height,Mode=TwoWay}" MinHeight="1"
Template="{Binding Mode=OneWay, Source={StaticResource DesignerItemTemplate}}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
<!--</Canvas>-->
</panZoom:PanAndZoomViewer>
Instead of Template="{Binding Mode=OneWay, Source={StaticResource DesignerItemTemplate}}" /> try this:
Template="{StaticResource DesignerItemTemplate}" />
If this doesn't help, could you please provide a little simpler example which demonstrates the problem and describe what you want to achive. It's not clear to me what you want to achive.
I found the problem! It was the InspectionItemList collection object that inheriting to a observable object. when I removed the obeservable in the object it works perfectly. Thanks Clemens and Stackoverflow this site really helps me a lot.
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)
{
}
}
}