Develop Reference

ListView Scroll whole layout/page

How can I make the ListView/Layout scroller to behave like modern layout like in android or windows 10. Currently the ListView scrollbar only applies to the ListView itself. I want the scroller to scroll the whole layout including the search bar in XAML.
I want also the ListView Items added to increment to the overall height of the ListView to achieve the effect.
Any available ways to do it with Native wpf xaml (No frameworks/dlls, just pure xaml/c#)
Code:
<local:BasePage x:Class="GeneralMerchandise.UI.Pages.UsersPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:a="clr-namespace:GeneralMerchandise.UI.AttachedProperties"
xmlns:local="clr-namespace:GeneralMerchandise.UI.Pages"
xmlns:c="clr-namespace:GeneralMerchandise.UI.Converter"
xmlns:viewmodel="clr-namespace:GeneralMerchandise.UI.ViewModel"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="UsersPage">
<Page.DataContext>
<viewmodel:UsersViewModel x:Name="VM"/>
</Page.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical"
Grid.Row="0"
Background="{StaticResource DefaultBackground}">
<TextBlock FontSize="{StaticResource FontSizeXLarge}"
Text="Users" />
<Border BorderThickness="0 0 0 1">
<Grid>
<StackPanel Orientation="Vertical" Width="300">
<TextBox Style="{StaticResource FlatTextBox}"
Width="270"
Margin="8"
a:Hint.TextProperty="Search"
a:ClearableText.EnableClearTextProperty="True"
Text="{Binding Search, UpdateSourceTrigger=PropertyChanged}"/>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<StackPanel.Resources>
<Style TargetType="RadioButton" BasedOn="{StaticResource FlatToggle}">
<Setter Property="Padding"
Value="15 10"/>
<Setter Property="BorderThickness"
Value="0 0 0 3"/>
</Style>
</StackPanel.Resources>
<RadioButton GroupName="Filter"
Content="All"
IsChecked="True"
Command="{Binding FilterActiveCommand}"
CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.None }"/>
<RadioButton GroupName="Filter"
Content="Active"
Command="{Binding FilterActiveCommand}"
CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.Active }"/>
<RadioButton GroupName="Filter"
Content="Deactived"
Command="{Binding FilterActiveCommand}"
CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.Deactivated }"/>
</StackPanel>
</StackPanel>
<Button DockPanel.Dock="Right"
Content="New"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Command="{Binding NewUserCommand}"/>
</Grid>
</Border>
</StackPanel>
<ListView Grid.Row="2"
Background="Transparent"
ItemsSource="{Binding UsersDisplay}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
BorderThickness="0"
Padding="20">
<ListView.Resources>
<c:UserDisplayDataFullnameConverter x:Key="FullnameConverter"/>
<c:BoolToValueConverter TrueValue="Active" FalseValue="Deactivated" x:Key="BoolToStringConverter"/>
</ListView.Resources>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Button Style="{StaticResource PlainButton}"
Background="White"
DataContext="{Binding}"
Width="250"
Height="150"
Padding="5"
BorderThickness="2"
Margin="{StaticResource MarginSmall}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Button.ToolTip>
<ToolTip>
<TextBlock Text="NAME"/>
</ToolTip>
</Button.ToolTip>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0"
Margin="5"
VerticalAlignment="Top"
Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}"
Fill="{StaticResource LightGrayBrush}"/>
<Ellipse Grid.Column="0"
Margin="5"
VerticalAlignment="Top"
x:Name="userPicturePopup"
Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}"
Width="Auto">
<Ellipse.Fill>
<ImageBrush ImageSource="{StaticResource UserIconMedium}"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Grid.Column="1"
Orientation="Vertical">
<TextBlock Text="{Binding Converter={StaticResource FullnameConverter}}"
TextWrapping="WrapWithOverflow"
Margin="10 5"/>
<TextBlock Margin="10 5"
Text="{Binding Created, StringFormat=Created {0:d}}"/>
<TextBlock Margin="10 5"
Text="{Binding IsActive, Converter={StaticResource BoolToStringConverter}, StringFormat=Account Is {0}}"/>
</StackPanel>
</Grid>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="Transparent"
BorderThickness="3"
Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>

Put your ListView, search bar, and whatever else you want to scroll inside of a ScrollViewer.

DataGrid with resizable height

I have a DataGrid wrapped in a Grid<-StackPanel and my problem is when I resize the window, DataGrid won't stretch and it's just adding blank space at the end.
I have tried binding and VerticalAlignment="Stretch" but to luck.
<Window x:Name="window" x:Class="ListViewExcel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:F"
Width="905.35"
SizeToContent="Height" WindowStartupLocation="CenterScreen" WindowStyle="None"
BorderThickness="0" BorderBrush="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" >
<Border x:Name="BorderCustomDialog" Background="Gold" >
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid>
<TextBlock x:Name="TbCaption" VerticalAlignment="Center" Text="TimeLiner"
Foreground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}"
Padding="11" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Image x:Name="Minimize" MouseLeftButtonDown="miniWin" Source="../Resources/minimizebutton.png" Height="25" Width="25" Margin="3,3" />
<Image x:Name="Maximize" MouseLeftButtonDown="maxiWin" Source="../Resources/maximizebutton.png" Height="25" Width="25" Margin="3,3"/>
<Image x:Name="Close" MouseLeftButtonDown="closeWin" Source="../Resources/closebutton.png" Height="25" Width ="25" Margin="0,3,10,3"/>
</StackPanel>
</Grid>
<Grid x:Name="grid" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="50"/>
<RowDefinition Height="Auto" MinHeight="300"/>
<RowDefinition Height="Auto" MinHeight="65"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="ImgInstructionIcon"
Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Left" Margin="32,10,0,0" VerticalAlignment="Top"
Source="../Resources/edit2.jpg" Height="42" Width="48" />
<TextBlock x:Name="TbInstructionHeading" Grid.Row="0" Margin="96,14,112,13"
Text="List View to Excel"
HorizontalAlignment="Stretch" VerticalAlignment="Center" TextWrapping="Wrap"
FontSize="18" Foreground="Goldenrod" Padding="7"/>
<Separator Margin="0" Height="5" VerticalAlignment="Bottom"/>
</Grid>
<Grid Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<DataGrid x:Name="dataGrid1"
Margin="20,20,20,25" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
CanUserAddRows="False" Height="500">
<DataGrid.Style>
<Style TargetType="DataGrid">
<Setter Property="RowBackground" Value="Wheat" />
<Setter Property="AlternatingRowBackground" Value="WhiteSmoke" />
</Style>
</DataGrid.Style>
<DataGrid.CellStyle >
<Style TargetType="DataGridCell">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightBlue" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
</DataGrid>
<Separator Margin="0" Height="5" VerticalAlignment="Bottom"/>
</Grid>
<Grid Grid.Row="2" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="#FFECECEC" BorderBrush="#FFC9C9C9" BorderThickness="0,1,0,1" Margin="0,0,0,0" >
<Grid Grid.Row="3" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button x:Name="btnCodetoExcel" Content="List to Excel" HorizontalAlignment="Left" VerticalAlignment="Top" Width="96" Height="25" Margin="38,10,0,0" Click="btnCodetoExcel_Click"/>
<Button x:Name="btnExit" Content="Exit" VerticalAlignment="Top" Margin="0,10,30,0" HorizontalAlignment="Right" Width="75" Height="25" Click="btnExit_Click"/>
</Grid>
</Border>
</Grid>
</Grid>
</StackPanel>
</Border>
</Window>

If you put a control inside a StackPanel it will be take only the space it need to be visualised, so it will not stretch.
For a dynamic view I almost always use a grid with row and column definitions.

Absolute positioning of a panel defined in a content control

I am trying to write a custom control in Windows UWP by inheriting from a Control class (A button with custom action). On clicking of this button I want to show a panel at the bottom of the page irrespective of where the control is being used in the page (Kind of a popup but I need the freedom in defining the position of the panel on the screen).
Can anyone help how i can get this done in XAML. Below is the template I am using for my custom control.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UI.Controls"
xmlns:converters="using:UI.ValueConverters">
<Style TargetType="local:Plugin">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Plugin">
<Grid>
<Grid.Resources>
<converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
<x:Double x:Key="EllipseDimension">30</x:Double>
</Grid.Resources>
<Button Name="PluginButton"
Width="{TemplateBinding PluginWidth}"
Height="{TemplateBinding PluginHeight}"
Command="{Binding PluginTrigger}"
Padding="0"
VerticalAlignment="Top"
AutomationProperties.Name="Main button"
Background="Transparent"
BorderThickness="0"
TabIndex="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<SymbolIcon Symbol="{TemplateBinding Symbol}"
Visibility="{Binding Image, Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=true}"
Foreground="Black"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ToolTipService.ToolTip="{TemplateBinding Label}" />
<Ellipse Visibility="{Binding Image, Converter={StaticResource NullToVisibilityConverter}}"
Width="{StaticResource EllipseDimension}"
Height="{StaticResource EllipseDimension}">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding Image}" />
</Ellipse.Fill>
</Ellipse>
</Grid>
</Button>
<StackPanel Name="popuptoshow"></StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

C# wpf failed to create an instance of custom control

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)
{
}
}
}

Adding combobox to Ribbon Control in XAML

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>