it seems that a WPF Separator doesn't show up in a ToolBar's Overflow panel when you shrink the size of the toolbar; is there someway to make it show? (I can get around it by using an empty colored label, but I'd still like to know why separators don't work).
An example: create a new WPF project with in the mainwindow.xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ToolBar HorizontalAlignment="Left" Name="toolBar1">
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Separator />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
</ToolBar>
</Grid>
My problem was answered on MSDN; you need to wrap it in a grid and rotate it 90 degrees:
<Grid Width="10">
<Separator>
<Separator.LayoutTransform>
<RotateTransform Angle="90" />
</Separator.LayoutTransform>
</Separator>
</Grid>
However in my actual project I didn't need to do the rotation for some reason or other.
Please try it this is showing separator with overflow and you can set the overflow with each element by "overflowmode" property.
<ToolBarPanel>
<ToolBar ToolBarTray.IsLocked="True" Name="toolBar1">
<ToolBar Band="1" BandIndex="1">
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" />
</ToolBar>
<Separator/>
<ToolBar Band="2" BandIndex="1">
<Button Content="ASDF" />
<Button Content="ASDF" />
</ToolBar>
<Separator/>
<ToolBar Band="2" BandIndex="2">
<Button Content="ASDF" />
<Button Content="ASDF" />
<Button Content="ASDF" ToolBar.OverflowMode="Always"/>
<Button Content="ASDF" ToolBar.OverflowMode="Always" />
</ToolBar>
</ToolBar>
</ToolBarPanel>
Hope this help you.
Related
In this particular case, images are bound to Buttons and ToggleButtons, which are inside of ToolBars, and ToolBars are underneath a ToolBarTray.
For some reason, any image or button that is put anywhere on the MainWindow doesn't appear when running the app on a laptop.
I tried adding an image outside the ToolBars and the ToolBarTray, so I know if the problem is somehow connected with these two controls, but it's probably not. The image wouldn't show up anyway.
When I try to debug the app on my computer or another computer, everything works just fine.
When I run the app on a computer
When I run the app on a laptop
XAML:
<ToolBarTray x:Name="homeTray" Margin="0,28,0,863" Background="#FFEEF5FD" ToolBarTray.IsLocked="True">
<ToolBar Band="0" BandIndex="0">
<Button x:Name="cut" ToolTip="Cut (CTRL + X)" Click="Cut">
<Image Source="./Resources/Text-Formatting/cut.png" Height="25" Width="25"/>
</Button>
</ToolBar>
<ToolBar Band="2" BandIndex="0">
<Button x:Name="copy" ToolTip="Copy (CTRL + C)" Click="Copy">
<Image Source="./Resources/Text-Formatting/copy.png" Height="25" Width="25"></Image>
</Button>
</ToolBar>
<ToolBar Band="0" Margin="63,10,-63,-10">
<ComboBox x:Name="cmbFonts" HorizontalAlignment="Left" IsEditable="True" VerticalAlignment="Top" Width="135" Background="#FFFBFBFB" BorderBrush="#FFB4B1B1" SelectionChanged="TxtFont" TextInput="ChangeFontByIntellisense"/>
<ComboBox x:Name="cmbFontSize" HorizontalAlignment="Left" IsEditable="True" VerticalAlignment="Top" Width="43" BorderBrush="#FFB4B1B1" Margin="15, 0, 0, 1" Background="White" SelectionChanged="TxtFontSize"/>
</ToolBar>
<ToolBar Band="0" Margin="85,47,-223,-55">
<Button>
<Image x:Name="alignmentLeft" ToolTip="Align left (CTRL + L)" Source="./Resources/Alignment/align-left.png" MouseDown="Alignment"></Image>
</Button>
<Button>
<Image x:Name="alignmentCenter" ToolTip="Align center (CTRL + E)" Source="./Resources/Alignment/align-center.png" MouseDown="Alignment"></Image>
</Button>
<Button>
<Image x:Name="alignmentRight" ToolTip="Align right (CTRL + R)" Source="./Resources/Alignment/align-right.png" MouseDown="Alignment"></Image>
</Button>
<Button>
<Image x:Name="alignmentJustify" ToolTip="Justify (CTRL + J)" Source="./Resources/Alignment/align-justify.png" MouseDown="Alignment"></Image>
</Button>
</ToolBar>
<ToolBar Margin="-172,77,149,-66" ToolTip="Letters height">
<Button Margin="0,2,0,1">
<Image Height="24" Width="24" x:Name="txtHeight" Source="./Resources/Text-Formatting/Aa.png" MouseLeftButtonDown="AaMenuOpen">
<Image.ContextMenu>
<ContextMenu>
<MenuItem Header="ALL CAPITAL" FontSize="17" FontFamily="Segoe UI Light" Click="AaOptions"></MenuItem>
<MenuItem Header="all small" FontSize="17" FontFamily="Segoe UI Light" Click="AaOptions"></MenuItem>
<MenuItem Header="First letter capital" FontSize="17" FontFamily="Segoe UI Light" Click="AaOptions"></MenuItem>
</ContextMenu>
</Image.ContextMenu>
</Image>
</Button>
</ToolBar>
<ToolBar Band="2" Margin="60,-8,28,8">
<ToggleButton Command="EditingCommands.ToggleBold" x:Name="bold" ToolTip="Bold (CTRL + B)">
<Image Source="./Resources/Text-Formatting/bold.png" Height="12.5" Width="12.5"/>
</ToggleButton>
</ToolBar>
<ToolBar Band="2" Margin="-28,-8,34,8">
<ToggleButton Command="EditingCommands.ToggleItalic" x:Name="italic" ToolTip="Italic (CTRL + I)">
<Image Source="./Resources/Text-Formatting/italic.png" Height="15" Width="15"></Image>
</ToggleButton>
</ToolBar>
<ToolBar Band="2" Margin="-36,-8,42,8">
<ToggleButton Command="EditingCommands.ToggleUnderline" x:Name="underline" ToolTip="Underlined (CTRL + U)">
<Image Source="./Resources/Text-Formatting/underline.png" Height="18" Width="18"></Image>
</ToggleButton>
</ToolBar>
<ToolBar Band="2" Margin="-99,33,177,-27">
<ToggleButton x:Name="btnReadOnly" ToolTip="Read-only" Click="TxtReadOnly">
<Image x:Name="readOnly" Source="Resources/Text-Formatting/readonly.png" Height="21" Width="21"/>
</ToggleButton>
</ToolBar>
<ToolBar Margin="-47,44,-26,-42" RenderTransformOrigin="3.719,0.568" ToolTip="Foreground color">
<toolkit:ColorPicker x:Name="foregroundColor" Width="40" Margin="10" SelectedColorChanged="ForegroundColor"/>
</ToolBar>
<ToolBar Margin="-51,76,-22,-74" RenderTransformOrigin="3.719,0.568" ToolTip="Background color">
<toolkit:ColorPicker x:Name="backgroundColor" Width="40" Margin="10" SelectedColorChanged="BackgroundColor"/>
</ToolBar>
<ToolBar Band="2" Margin="-166,-5,240,11">
<ToggleButton x:Name="superscript" ToolTip="Superscript" Click="Superscript">
<Image Source="Resources/Text-Formatting/superscript.png" Height="21" Width="21"/>
</ToggleButton>
</ToolBar>
<ToolBar Band="2" Margin="-284,33,365,-27">
<ToggleButton x:Name="subscript" ToolTip="Subscript" Click="Subscript">
<Image Source="Resources/Text-Formatting/subscript.png" Height="21" Width="21"/>
</ToggleButton>
</ToolBar>
</ToolBarTray>
Labels shown in the pictures above:
<Label x:Name="lbCut" Content="Cut" HorizontalAlignment="Left" Margin="56,40,0,0" VerticalAlignment="Top" IsEnabled="False"/>
<Label x:Name="lbCopy" Content="Copy" HorizontalAlignment="Left" Margin="56,74,0,0" VerticalAlignment="Top" IsEnabled="False"/>
<Rectangle x:Name="rectSeparator" Fill="#FFC1C1F9" HorizontalAlignment="Left" Height="110" Margin="99,33,0,0" Stroke="#FFC1C1F9" VerticalAlignment="Top" Width="1"/>
<Label Content="Alignment" HorizontalAlignment="Left" Margin="388,40,0,0" VerticalAlignment="Top" IsEnabled="False"/>
I put everything in one ToolBarTray and it solved the problem.
Thank you, Andy, for giving me the advice.
Is it possible with WPF/ MaterialDesignInXamlToolkit
to display ToolBar as Dock right aligned?
Default is left aligned.
I think I should modify this Style file.
but I could not find "DockPanel.Dock="Left"
<ToolBarTray>
<ToolBar Style="{DynamicResource MaterialDesignToolBar}" ClipToBounds="False" >
<Button ToolTip="Home">
<materialDesign:PackIcon Kind="Home" />
</Button>
<Button ToolTip="Add">
<materialDesign:PackIcon Kind="AccountMultiplePlus" />
</Button>
<Button ToolTip="Test">
<materialDesign:PackIcon Kind="FlagCheckered" />
</Button>
<Separator />
<Button ToolTip="Layer" >
<materialDesign:PackIcon Kind="Layers" />
</Button>
<Separator />
<Button ToolTip="Setting" >
<materialDesign:PackIcon Kind="Settings" />
</Button>
<Button ToolTip="Help">
<materialDesign:PackIcon Kind="HelpCircleOutline" />
</Button>
</ToolBar>
</ToolBarTray>
<ToolBarTray FlowDirection="RightToLeft">
<ToolBar Style="{DynamicResource MaterialDesignToolBar}" ClipToBounds="False" >
<Button ToolTip="Home">
<materialDesign:PackIcon Kind="Home" />
</Button>
<Button ToolTip="Add">
<materialDesign:PackIcon Kind="AccountMultiplePlus" />
</Button>
<Button ToolTip="Test">
<materialDesign:PackIcon Kind="FlagCheckered" />
</Button>
<Separator />
<Button ToolTip="Layer" >
<materialDesign:PackIcon Kind="Layers" />
</Button>
<Separator />
<Button ToolTip="Setting" >
<materialDesign:PackIcon Kind="Settings" />
</Button>
<Button ToolTip="Help">
<materialDesign:PackIcon Kind="HelpCircleOutline" />
</Button>
</ToolBar>
</ToolBarTray>
How to set Margin to the StackPanel childrens depends up on the StackPanel Orientation, for example Orientatioin is horizontal then set margin 0,0,10,0 or orientation is Vertical then set margin 0,10,0,0.
I try to find any idea but till now i not find anything, can you help me?
Thanks
Edit:
<StackPanel Orientation="Horizontal">
<Button Content="Q" />
<Button Content="W" />
<Button Content="E" />
<Button Content="R" />
<Button Content="T" />
<Button Content="Y" />
<Button Content="U" />
<Button Content="I" />
</StackPanel>
Try this.
<StackPanel Name="stack" Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="0,0,0,10"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=stack, Path=Orientation}" Value="Horizontal">
<Setter Property="Margin" Value="0,0,10,0" />
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Button Content="Q" />
<Button Content="W" />
<Button Content="E" />
<Button Content="R" />
<Button Content="T" />
<Button Content="Y" />
<Button Content="U" />
<Button Content="I" />
</StackPanel>
My app needs to have items in be aligned by the user; left, right and center. I am having an issue formating the app to handle this, meaning that application can either align left or right or center but not all three. How can I get the items for example 5 buttons to be aligned left, right and center changed via a button press (I should know how to do this once I am able to actual format in XMLA)?
My first thought would be do this with a dock panel;
<DockPanel MinWidth="500" Background="LightGray" Margin="20" LastChildFill="False">
<Button Margin="10" DockPanel.Dock="Left" >one</Button>
<Button Margin="10" DockPanel.Dock="Left">two</Button>
<Button Margin="10" DockPanel.Dock="Left">three</Button>
<Button Margin="10" DockPanel.Dock="Left">four</Button>
<Button Margin="10" DockPanel.Dock="Left">five</Button>
</DockPanel>
This works great for Left and right alignment. The problem is that there is no DockPanel.Dock="Center"
Next tried a Grid;
<Grid Background="LightGray" MinWidth="500">
<Button HorizontalAlignment="Left" Margin="10,10,10,10">one</Button>
<Button HorizontalAlignment="Left" Margin="10,10,10,10">two</Button>
<Button HorizontalAlignment="Left" Margin="10,10,10,10">three</Button>
<Button HorizontalAlignment="Left" Margin="10,10,10,10">four</Button>
<Button HorizontalAlignment="Left" Margin="10,10,10,10">five</Button>
</Grid>
Problem is that this happens;
edit: Apparently I didn't make the my question clear enough.
edit2: #Henka Programmer suggestion below did not work. First I believe he meant HorizontalAlignment not VerticalAlignment. With this code;
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Background="LightGray" MinWidth="500">
<Button Content="btn 01" />
<Button Content="btn 02" />
<Button Content="btn 03" />
<Button Content="btn 0" />
</StackPanel>
Gives this result;
Changing HorizontalAlignment="Right" to HorizontalAlignment="Center" makes no difference
The horizontal alignment property on the StackPanel is going to align the StackPanel relative to its parent element. This works just fine:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="1000">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Button 1" />
<Button Content="Button 2" />
<Button Content="Button 3" />
<Button Content="Button 4" />
<Button Content="Button 5" />
</StackPanel>
</Window>
i think you mean this:
// ...
<Grid>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Button Content="btn 01" />
<Button Content="btn 02" />
<Button Content="btn 03" />
<Button Content="btn 0" />
</StackPanel>
</Grid>
// ...
and you can change the alignment of StackPanel with:
VeriticalAlignment="Center"
VeriticalAlignment="Right"
VeriticalAlignment="Left"
and the StackPanel Orientation :
Vertical
Horizontal
For instance, I have this markup:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
<Button x:Name="PreviousPage"
Content="Previous" />
<Button x:Name="Info"
Content="Information" />
<Button x:Name="InetTicket"
Content="Internet ticket" />
<Button x:Name="FindStation"
Content="Find station" />
<Button x:Name="NextPage"
Content="Next" />
</StackPanel>
</Grid>
How to determine the widest button and share it's size with the other buttons. So the buttons should be of the same width at the end. How to accomplish such a task using xaml?
Try to use Grid with IsSharedSizeScope, instead of StackPanel, like below:
<Grid Grid.IsSharedSizeScope="true" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="buttons"/>
<ColumnDefinition SharedSizeGroup="buttons"/>
<ColumnDefinition SharedSizeGroup="buttons"/>
<ColumnDefinition SharedSizeGroup="buttons"/>
<ColumnDefinition SharedSizeGroup="buttons"/>
</Grid.ColumnDefinitions>
<Button x:Name="PreviousPage" Content="Previous" Grid.Column="0"/>
<Button x:Name="Info" Content="Information" Grid.Column="1"/>
<Button x:Name="InetTicket" Content="Internet ticket" Grid.Column="2"/>
<Button x:Name="FindStation" Content="Find station" Grid.Column="3"/>
<Button x:Name="NextPage" Content="Next" Grid.Column="4"/>
</Grid>
You could also use a uniform grid which will make sure all the buttons are the same size.
Use a UniformGrid:
<UniformGrid Rows="1">
<Button x:Name="PreviousPage"
Content="Previous" />
<Button x:Name="Info"
Content="Information" />
<Button x:Name="InetTicket"
Content="Internet ticket" />
<Button x:Name="FindStation"
Content="Find station" />
<Button x:Name="NextPage"
Content="Next" />
</UniformGrid>