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>
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.
I am having trouble working out how to bind the content of a label to the default (ToString()) value of ItemsControl object.
The ItemsControl element is bound to
stepList.ItemsSource = steps;
The steps object is
private var steps = new ObservableCollection<Action>();
<ItemsControl Name="stepList" Margin="10,2,10,10">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="1" Margin="0,2,0,2" DockPanel.Dock="Top">
<DockPanel Margin="0,2,0,2">
<DockPanel Width="106" HorizontalAlignment="Right" DockPanel.Dock="Right">
<Button DockPanel.Dock="Right" Click="_deleteStep" Width="22" Margin="0,0,10,0">
<Image Source="resources\icons\delete-bin.png" />
</Button>
<Button DockPanel.Dock="Right" Click="_editStep" Width="22" Margin="0,0,2,0">
<Image Source="resources\icons\edit.png" />
</Button>
<Button DockPanel.Dock="Right" Click="_moveDown" Width="22" Margin="0,0,2,0">
<Image Source="resources\icons\down.png" />
</Button>
<Button DockPanel.Dock="Right" Click="_moveUp" Width="22" Margin="0,0,2,0">
<Image Source="resources\icons\up.png" />
</Button>
</DockPanel>
<DockPanel DockPanel.Dock="Left">
<Label HorizontalAlignment="Stretch" Margin="10,0,0,0" Content="{????}"/>
</DockPanel>
</DockPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Figured it out!
Content="{Binding BindsDirectlyToSource=True}
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
I'm trying to put WPF user control on the WinForm using ElementHost but as a result of my icons are not displayed on the button.
http://gyazo.com/7dc201e30246b2b2676060de0ebf35a9
http://gyazo.com/67f039ce310d17a2d270c816ebc5fb3b
<ToolBar>
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Resources/document-add2.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Добавить стратегию</TextBlock>
</StackPanel>
</Button>
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Resources/document-delete2.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Удалить стратегию</TextBlock>
</StackPanel>
</Button>
<Separator></Separator>
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Resources/document-control_play.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Запустить стратегию</TextBlock>
</StackPanel>
</Button>
<Separator></Separator>
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Resources/document-gear.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Изменить настройки</TextBlock>
</StackPanel>
</Button>
</ToolBar>
Did you specify your siteoforigin?
If the images can be found in the same project, try:
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://application:,,,/Resources/document-gear.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Изменить настройки</TextBlock>
</StackPanel>
</Button>
So: pack://application:,,,/[path from root of project]
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.