none
Button Alignment in WPF Toolbar RRS feed

  • Question

  • Hi, is there a way to set the alignment to "Right" for a button in a WPF toolbar?

    <ToolBar DockPanel.Dock="Top" Height="40" Name="toolBar1" VerticalAlignment="Top" Margin="15, 15, 15, 10"
    Opacity="1" Background="{StaticResource ToolBackgroundGradient}">
    <Button Content="Save" FontSize="15" Padding="6" Name="btnSave" Foreground="Black"/>
    <Button Content="Add Family" FontSize="15" Padding="6" Name="btnAddFamily" Foreground="Black" />
    <Button Content="Exit" FontSize="15" Click="Button_Click" Padding="6" Margin="210, 0, 0, 0" Foreground="Red"/>
    </ToolBar>

    I want the Exit button on this right side.

    Thanks,
    Rahul
    Thursday, February 7, 2008 10:06 PM

Answers

  • Okay, this version of code should be able to do the trick:

    Code Snippet
    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <
    ToolBar DockPanel.Dock="Top" Height="40" Name="toolBar1" VerticalAlignment="Top">
    <
    DockPanel Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ToolBarPanel}}}">
    <
    DockPanel.Resources>
    <
    Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    </
    Style>
    </
    DockPanel.Resources>
    <
    Button Content="Save" FontSize="15" Name="btnSave" Foreground="Black"/>
    <
    Button Content="Add Family" FontSize="15" Name="btnAddFamily" Foreground="Black" />
    <
    Button Content="Exit" FontSize="15" HorizontalAlignment="Right" Foreground="Red"/>
    </
    DockPanel>
    </
    ToolBar>
    </
    Page>

    Hope this helps
    Wednesday, February 13, 2008 2:01 AM

All replies

  • The following code can do the trick:

    Code Snippet
    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <
    ToolBar DockPanel.Dock="Top" Height="40" Name="toolBar1" VerticalAlignment="Top">
    <
    DockPanel Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ToolBarPanel}}}">
    <
    Button Content="Save" FontSize="15" Name="btnSave" Foreground="Black"/>
    <
    Button Content="Add Family" FontSize="15" Name="btnAddFamily" Foreground="Black" />
    <
    Button Content="Exit" FontSize="15" HorizontalAlignment="Right" Foreground="Red"/>
    </
    DockPanel>
    </
    ToolBar>
    </
    Page>

    Hope this helps
    Monday, February 11, 2008 6:21 AM
  • Thank you for your reply, but this does not solve the problem. It turns off all the toolstrip button behavior and now it looks like I have 3 regular buttons floating on top of my toobar. I can make the background transparent which helps a little, but I have lost the rollover effect that I got when "button" was directly under "toolbar". Also, there is a border around each of the buttons - overall it just looks unprofessional.

    I'm using a vista-glass-like gradient on the toolbar itself.
    Tuesday, February 12, 2008 8:53 PM
  • Okay, this version of code should be able to do the trick:

    Code Snippet
    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <
    ToolBar DockPanel.Dock="Top" Height="40" Name="toolBar1" VerticalAlignment="Top">
    <
    DockPanel Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ToolBarPanel}}}">
    <
    DockPanel.Resources>
    <
    Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    </
    Style>
    </
    DockPanel.Resources>
    <
    Button Content="Save" FontSize="15" Name="btnSave" Foreground="Black"/>
    <
    Button Content="Add Family" FontSize="15" Name="btnAddFamily" Foreground="Black" />
    <
    Button Content="Exit" FontSize="15" HorizontalAlignment="Right" Foreground="Red"/>
    </
    DockPanel>
    </
    ToolBar>
    </
    Page>

    Hope this helps
    Wednesday, February 13, 2008 2:01 AM
  • Yes, that worked perfectly, thank you for your help Marco!
    Wednesday, February 13, 2008 5:52 PM
  • Sorry to say but it works not so perfect as it wanted to.
    I have toolbar with 2 controls:

    <ToolBar x:Name="toolBar1">

    <DockPanel Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ToolBarPanel}}}">

    <DockPanel.Resources>

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"></Style>

    </DockPanel.Resources>

    <Button Content="Refresh" Click="refreshButton_Click"/>

    <Separator/>

    <Button Content="Test" HorizontalAlignment="Right"/>

    </DockPanel>

    </ToolBar>

     

     

    Window starts in maximized mode. When user restores window, or decreases the width of the window - dockpanel HIDES. And it will be hidden until user will not increase the window's width.

    How this WPF bug can be solved?

    Please post here whether you can reproduce this bug or not.

     

    Tuesday, June 23, 2009 5:45 AM
  • I'm having the same problem as Philipp with this solution. Everything looks great until the window or user control that contains the toolbar is resized. The problem is especially noticable when the toolbar is getting smaller. Any ideas on how to keep the size of the toolbar and the size of the dockpanel in sync, or what else could be causing this undesired behavior? Thank you.

    ZenkeiRich
    Friday, November 20, 2009 9:26 AM
  • Am also having the same problem, i cannot right align button, did any one find the solution.

    If any one got it please let me know.

    Thanks and Regards

    Hiran Repakula.
    Friday, December 18, 2009 10:38 AM
  • Please check this. I hope it helps you.
     <DockPanel Margin="0" VerticalAlignment="Top" Background="{DynamicResource ToolBarHorizontalBackground}">
                    <ToolBar DockPanel.Dock="Left"  Height="36" Background="Transparent">
                        <Button  ToolTip="Create a new message">
                            <Image Source="Images/Alarm_32.png" ></Image>
                        </Button>
                    </ToolBar>

                    <ToolBar DockPanel.Dock="Right" Height="36" HorizontalAlignment="Right"  Background="Transparent" >
                        <Button  ToolTip="Create a new message">
                            <Image Source="accepted_48.png" ></Image>
                        </Button>
                    </ToolBar>
                </DockPanel>
    • Proposed as answer by Sandy.ind Tuesday, December 29, 2009 11:33 AM
    Tuesday, December 29, 2009 11:10 AM
  • Here is a great solution I came up with, combining several examples I found online:

        <ToolBar x:Uid="ToolWindowToolbar" AllowDrop="False" Focusable="False" HorizontalAlignment="Stretch" >
            <ToolBar.Resources>
                <Style TargetType="{x:Type ToolBarPanel}">
                    <Setter Property="Orientation" Value="Vertical"/>
                </Style>
            </ToolBar.Resources>

            <DockPanel Background="Transparent" HorizontalAlignment="Stretch">

                <Image Height="16" Width="16" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" Source="..." Margin="5,0,6,0" />

                <Separator />
                
                ...

                <Grid DockPanel.Dock="Right">
                    <!-- This image will be all the way to the right -->
                    <Image Height="16" Width="16" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" Source="..." Margin="5,0,6,0" />
                </Grid>

            </DockPanel>
        </ToolBar>
    Wednesday, March 10, 2010 11:14 PM