wpfmenumenuitemstackpanel
WPF using StackPanel within a a menu
I have a wpf application where I am using a side menu. In one section of the menu I have a Header menuitem and two sub menuitems. I change the background on the two sub menuitems to show a difference. There is a slight gap between the two sub menuitems with a different color. I want the background of both sub menuites to be the same with not gap in between. Here is my menu code:
<MenuItem x:Name="miReplaceLF" Header="Replace Line Feeds" Height="24" VerticalAlignment="Center"
ToolTip="Replace all line feeds in choosen fields with the replacement character." />
<MenuItem x:Name="smiDBFile" Header="DataBase Table"
Click="MenuItem_Click_RLFDBDatabase" Background="#FFBEEBF7"
Margin="15,0,0,0"
ToolTip="Replace line feeds on fields in a database table." />
<MenuItem x:Name="smiExcelTextFile" Header="Excel or Text File" Height="24"
VerticalAlignment="Top" Click="MenuItem_Click_RLFExcelText" Background="#FFBEEBF7"
Margin="15,0,0,0"
ToolTip="Choose a Excel/Text File." />
I tried putting the two sub menuitems within a stackpanel. This gives me the ability to have the uniform background I want but the sub menuitems are shifted to the right way too much. I just want a small indent on the two sub menuitem. I can't find a way to get the menuitems alligned to the left. Here is the code with the stackpanel.
<MenuItem x:Name="miReplaceLF" Header="Replace Line Feeds" Height="24" VerticalAlignment="Center"
ToolTip="Replace all line feeds in choosen fields with the replacement character." />
<StackPanel Background="#FFBEEBF7">
<MenuItem x:Name="smiDBFile" Header="DataBase Table"
Click="MenuItem_Click_RLFDBDatabase" Background="#FFBEEBF7"
Margin="0,0,0,0"
ToolTip="Replace line feeds on fields in a database table." />
<MenuItem x:Name="smiExcelTextFile" Header="Excel or Text File" Height="24"
Click="MenuItem_Click_RLFExcelText" Background="#FFBEEBF7"
Margin="0,0,0,0"
ToolTip="Choose a Excel/Text File." />
</StackPanel>
Here is the full XAML code, this has been changed to use the suggestions by Ed Plunkett
<Window x:Class="TextUtilities.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:TextUtilities"
mc:Ignorable="d"
Title="Text Utilites" x:Name="TextUtils" Height="420" Width="900" Left="100" Top="30"
ResizeMode="CanMinimize" WindowStartupLocation="CenterScreen" Background="#FFDBF4FB">
<Window.Resources>
<Style
TargetType="MenuItem"
BasedOn="{StaticResource {x:Type MenuItem}}"
x:Key="RLFItem">
<Setter Property="Margin" Value="15,0,0,0" />
<Setter Property="Background" Value="#FFBEEBF7" />
</Style>
</Window.Resources>
<Grid>
<Menu HorizontalAlignment="Left" Width="150" Margin="0,2,0,0" FontFamily="Arial" FontSize="14.667"
BorderThickness="0,2,2,0" BorderBrush="#FFE0E0E0" Background="#FFDBF4FB">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="spItemsPanel" Background="#FFDBF4FB" />
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem x:Name="miReplaceLF" Header="Replace Line Feeds" Height="24" VerticalAlignment="Center"
ToolTip="Replace all line feeds in choosen fields with the replacement character."/>
<MenuItem x:Name="smiDBFile" Header="DataBase Table" Height="24"
Style="{StaticResource RLFItem}" Click="MenuItem_Click_RLFDBDatabase"
ToolTip="Replace line feeds on fields in a database table." />
<MenuItem x:Name="smiExcelTextFile" Header="Excel or Text File" Height="24"
Style="{StaticResource RLFItem}" Click="MenuItem_Click_RLFExcelText"
ToolTip="Choose a Excel/Text File." />
<MenuItem x:Name="miCreateLF" Header="Create Line Feeds" Height="24" VerticalAlignment="Center" ToolTip="Replace all the replacement characters with line feeds." />
<MenuItem x:Name="miViewTextField" Header="View Text Field" Height="24" VerticalAlignment="Center" Click="MenuItem_Click_ViewTextField" ToolTip="Display the contents of a text field. Allows you to see how the data will be displayed in the UI." />
<MenuItem x:Name="miViewSPTEXT" Header="View SPTEXT" Height="24" VerticalAlignment="Center" Click="MenuItem_Click_ViewSPTEXT" ToolTip="Display field sptd_text from table sptextdt. Allows you to see how the data will be displayed in the UI." />
<MenuItem x:Name="miSPlitLargeFile" Header="Split Large File" Height="24" VerticalAlignment="Center" Click="MenuItem_Click_SLF" ToolTip="Split large files, over 60MB into smaller files." />
<MenuItem x:Name="miHowTo" Header="How To" Height="24" VerticalAlignment="Center" Click="MenuItem_Click_HowTo" ToolTip="Instructions on how to use the SPText Utilities." />
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<MenuItem Header="Close" Height="24" VerticalAlignment="Center" Click="MenuItem_Click_Close" />
</Menu>
<Grid x:Name="grdRLFDatabase" Visibility="Visible" Height="350" Margin="155,0,0,0" VerticalAlignment="Top">
<TextBox x:Name="txtRLFDBTitle" IsReadOnly="True" TextWrapping="Wrap"
Text="Process to clean a database table and create a pipe delimited text file. You may type in a server instance or select one from the list. Once a server is choosen please cliack the 'Load DB Info' button."
HorizontalAlignment="Left" Height="62" Margin="10,4,0,0" VerticalAlignment="Top" Width="659" FontFamily="Arial"
FontSize="16" Padding="5,1,1,1" Background="#FFDBF4FB" BorderBrush="Gray" BorderThickness="1"/>
<Label x:Name="lblRLFDBInstance" Content="Enter Database Instance:" HorizontalAlignment="Left" Height="28" Margin="5,87,0,0" VerticalAlignment="Top" Width="175" FontFamily="Arial" FontSize="14.667"/>
<ComboBox x:Name="cbxRLFDBInstances" x:FieldModifier="public" HorizontalAlignment="Left" Height="28" Margin="189,87,0,0" VerticalAlignment="Top" Width="250" FontFamily="Arial" FontSize="14.667" IsEditable="True"/>
<Button x:Name="btnRLFDBLoadDBInfo" Content="Load DB Info" HorizontalAlignment="Left" Height="26" Margin="475,89,0,0" VerticalAlignment="Top" Width="101" FontFamily="Arial" FontSize="14.667" Click="btnRLFDBLoadDBInfo_Click" Background="#FFEEFFFF" ToolTip="Click here after choosing or typing in the datbase instance. This will populate the database list."/>
<Label x:Name="lblRLFDBName" Content="Choose Database:" HorizontalAlignment="Left" Height="28" Margin="5,131,0,0" VerticalAlignment="Top" Width="175" FontFamily="Arial" FontSize="14.667"/>
<ComboBox x:Name="cbxRLFDBName" x:FieldModifier="public" HorizontalAlignment="Left" Height="28" Margin="189,132,0,0" VerticalAlignment="Top" Width="250" FontFamily="Arial" FontSize="14.667" IsEditable="True" SelectionChanged="cbxRLFDBName_SelectionChanged" ToolTip="Once a database is choosen the table list will automatically be populated."/>
<Label x:Name="lblRLFDBTableName" Content="Choose Table:" HorizontalAlignment="Left" Height="28" Margin="5,176,0,0" VerticalAlignment="Top" Width="175" FontFamily="Arial" FontSize="14.667"/>
<ComboBox x:Name="cbxRLFDBTableName" x:FieldModifier="public" HorizontalAlignment="Left" Height="28" Margin="189,177,0,0" VerticalAlignment="Top" Width="250" FontFamily="Arial" FontSize="14.667" IsEditable="True" />
<Label x:Name="lblRLFDBOutputName" Content="Choose Output Folder:" HorizontalAlignment="Left" Height="28" Margin="5,233,0,0" VerticalAlignment="Top" Width="175" FontFamily="Arial" FontSize="14.667"/>
<TextBox x:Name="txtRLFDBOutputFolder" x:FieldModifier="public" IsReadOnly="True" HorizontalAlignment="Left" Height="50" Margin="189,222,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="250" FontFamily="Arial" FontSize="14.667" />
<Button x:Name="btnRLFDBBrowseFolder" Content="Browse..." x:FieldModifier="public" HorizontalAlignment="Left" Height="26" Margin="475,235,0,0" VerticalAlignment="Top" Width="74" FontFamily="Arial" FontSize="14.667" Background="#FFEEFFFF" Click="btnRLFDBBrowseFolder_Click" ToolTip="Choose the folder where the text file will be saved to. The file will be named the same as a the table with '_duc' appended to the end."/>
<Button x:Name="btnRLFDBSubmit" Content="Submit" x:FieldModifier="public" HorizontalAlignment="Left" Height="26" Margin="261,300,0,0" VerticalAlignment="Top" Width="74" FontFamily="Arial" FontSize="14.667" Background="#FFEEFFFF" Click="btnRLFDBSubmit_Click"/>
</Grid>
<Grid x:Name="grdRLFExcelText" Visibility="Hidden" Height="320" Width="750" Margin="150, 0, 0 0" VerticalAlignment="Top">
<Label x:Name="lblRLFFileInfo" Content="Process to replace Line Feeds in text fields." HorizontalAlignment="Left" Margin="3,15,0,0" VerticalAlignment="Top" Width="583" Height="30" FontFamily="Arial" FontSize="18.667" FontWeight="Bold"/>
<Label x:Name="lblRLFFileName" Content="Enter the filename:" HorizontalAlignment="Left" Margin="3,79,0,0" VerticalAlignment="Top" Width="162" Height="30" FontFamily="Arial" FontSize="16"/>
<TextBox x:Name="txtRLFFileName" HorizontalAlignment="Left" Height="50" Margin="186,70,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="400" VerticalContentAlignment="Center" FontFamily="Arial" FontSize="16" FontWeight="Bold" Background="#FFDBF4FB" TextChanged="txtRLFFileName_TextChanged" />
<Button x:Name="btnRLFFileBrowse" Content="Browse..." HorizontalAlignment="Left" Margin="630,84,0,0" VerticalAlignment="Top" Width="89" FontFamily="Arial" FontSize="16" Background="#FFDBF4FB" Click="btnRLFFileBrowse_Click"/>
<Label x:Name="lblRLFOutputFolder" Content="Choose output folder:" HorizontalAlignment="Left" Margin="3,149,0,0" VerticalAlignment="Top" Width="180" Height="30" FontFamily="Arial" FontSize="16"/>
<TextBox x:Name="txtRLFOutputFolder" HorizontalAlignment="Left" Height="50" Margin="186,138,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="400" VerticalContentAlignment="Center" FontFamily="Arial" FontSize="16" FontWeight="Bold" Background="#FFDBF4FB" TextChanged="txtRLFOutputFolder_TextChanged"/>
<Button x:Name="btnRLFFolderBrowse" Content="Browse..." HorizontalAlignment="Left" Margin="630,154,0,0" VerticalAlignment="Top" Width="89" FontFamily="Arial" FontSize="16" Background="#FFDBF4FB" Click="btnRLFFolderBrowse_Click"/>
<Label x:Name="lblRLFFieldDelim" Content="Field Delimiter:" HorizontalAlignment="Left" Margin="190,202,0,0" VerticalAlignment="Top" Width="118" Height="30" FontFamily="Arial" FontSize="16"/>
<TextBox x:Name="txtRLFFieldDelim" HorizontalAlignment="Left" Height="22" Margin="312,206,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="18" VerticalContentAlignment="Center" FontFamily="Arial" FontSize="16" FontWeight="Bold" Background="#FFDBF4FB" TextChanged="txtRLFFileName_TextChanged" MaxLength="2" HorizontalContentAlignment="Center" />
<CheckBox x:Name="chbxRLFHeaders" Content="Has Header Row" HorizontalAlignment="Left" Height="17" Margin="430,208,0,0" VerticalAlignment="Top" Width="149" FontFamily="Arial" FontSize="16" Checked="chbxRLFHeaders_Checked" Unchecked="chbxRLFHeaders_Unchecked"/>
<Button x:Name="btnRLFSubmit" Content="Submit" HorizontalAlignment="Left" Margin="319,259,0,0" VerticalAlignment="Top" Width="82" Height="31" Background="#FFDBF4FB" FontFamily="Arial" FontSize="16" Click="btnRLFSubmit_Click"/>
</Grid>
</Grid>
</Window>
Solution
You can create a MenuItem style which changes Padding or Margin (your choice; try both) and background color for the menu items you apply it to, and then set it on whichever items you chose:
<Window.Resources>
<Style
TargetType="MenuItem"
BasedOn="{StaticResource {x:Type MenuItem}}"
x:Key="SpecialItem"
>
<Setter Property="Margin" Value="15,0,0,0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="#FFBEEBF7" />
</Style>
</Window.Resources>
...
<MenuItem Header="Foo" />
<MenuItem Header="Bar" Style="{StaticResource SpecialItem}" />
<MenuItem Header="Baz" Style="{StaticResource SpecialItem}" />
The mouse-hover state for those will look a little funny, unfortunately. With the default WPF MenuItem template, or at least the one I'm seeing here, you need to replace the entire control template to change that. We can go there if you need to; let me know.
Update
How to add an image to a Stack Overflow question: Edit the question, then click the "add picture" icon which is highlighted in orange.
