locked
Why is my controls always fixed at the center? RRS feed

  • Question

  • Hi,

    I am trying to learn WPF.
    But just designing the UI is giving me a big headache since it is quite different from the usual Windows Application.
    For now, I am trying to add ToolBarTray or any other control.
    However, the control is always placed automatically in the center of the window. And there is no way I can move it.
    Can someone tell me what is wrong?
    Thank you.

    <Window x:Class="Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="MyWindow" Height="830.166" Width="1015.203" WindowStartupLocation="CenterScreen" WindowState="Normal" Name="MyWindow">  
    </Window> 
     

    PS: I wonder should I start one more thread on this, but what is the difference between ToolBarTray and ToolBarPanel? I read up on them on MSDN, but still not sure under which situation should I use which one.

    Thank you.
    Thursday, December 25, 2008 2:11 AM

Answers

  • By default controls are Horizontally and Vertically Center aligned. So you have to use HorizontalAlignment, VerticalAlignment, VerticalContentAlignment and HorizontalContentAlignment properties to set controls as you want.
    Gaurav Khanna
    Thursday, December 25, 2008 5:00 AM
  • Hi,

     

    -->but what is the difference between ToolBarTray and ToolBarPanel? I read up on them on MSDN, but still not sure under which situation should I use which one.ToolBarPanel in XAML.

     

    ToolBarPanel is mainly used to  arrange ToolBar items inside a ToolBar, it has two important attributes as shown in the following:

         1 Orientation: Adjusts the orientation of ToolBarPanel and can get Horizontal or Vertical values. Default is Vertical.

         2 OverFlowMode: Specifies the behavior of ToolBarPanel.

     

    While ToolBarTray  is mainly used to represent the container that handles the layout of a ToolBar,

    which also has two core properties:

         1 IsLocked:  Gets or sets a value that indicates whether a ToolBarcan be moved insideToolBarTray

         2 Orientation: Represents the initial form of ToolBar items in a ToolBarTray.  Default is Horizontal.


    Here is a small example of showing the ToolBarPanel and ToolBarTray :

     

    XAML code: 

     

    <Window x:Class="WpfToolBarDemo.Window1"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        WindowStartupLocation="CenterScreen"

        Title="Window1" Height="400" Width="650">

        <StackPanel>

            <TextBlock Text="ToolBarPanel in ToolBar: " FontWeight="Bold" />

            <ToolBar

              Margin="5" 

              Width="200"

              Height="50">

                <Button>

                    <TextBlock Margin="10">B1</TextBlock>

                </Button>

                <Button>

                    <TextBlock Margin="10">B2</TextBlock>

                </Button>

                <Button>

                    <TextBlock Margin="10">B3</TextBlock>

                </Button>

                <!--ToolBarPanel in ToolBar-->

                <ToolBarPanel ToolBar.OverflowMode="Always" Orientation="Vertical" >

                    <Button>

                        <TextBlock Margin="10">B1</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="10">B2</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="10">B3</TextBlock>

                    </Button>

                </ToolBarPanel>

            </ToolBar>

            <Rectangle  Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"

                        Height="2" Fill="Red"  />

            <TextBlock Text="ToolBarTray contains ToolBar: " FontWeight="Bold" />

            <ToolBarTray IsLocked="True"

                         Orientation="Horizontal">

                <ToolBar

                      Margin="5" 

                      Band="0"

                      BandIndex="0"

                      Width="200"

                      Height="50">

                    <Button>

                        <TextBlock Margin="10">B1</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="10">B2</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="10">B3</TextBlock>

                    </Button>

                </ToolBar>

                <ToolBar

                  Margin="5" 

                  Width="130"

                  Band="1"

                  BandIndex="1"         

                  Height="40">

                    <Button>

                        <TextBlock Margin="5">B1</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="5">B2</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="5">B3</TextBlock>

                    </Button>

                </ToolBar>

            </ToolBarTray>

        </StackPanel>

    </Window>

    If you are still having some question with, please feel free to ask.

     

    Thanks.


    Jim Zhou -MSFT
    Friday, December 26, 2008 3:11 AM

All replies

  • By default controls are Horizontally and Vertically Center aligned. So you have to use HorizontalAlignment, VerticalAlignment, VerticalContentAlignment and HorizontalContentAlignment properties to set controls as you want.
    Gaurav Khanna
    Thursday, December 25, 2008 5:00 AM
  • Hi,

     

    -->but what is the difference between ToolBarTray and ToolBarPanel? I read up on them on MSDN, but still not sure under which situation should I use which one.ToolBarPanel in XAML.

     

    ToolBarPanel is mainly used to  arrange ToolBar items inside a ToolBar, it has two important attributes as shown in the following:

         1 Orientation: Adjusts the orientation of ToolBarPanel and can get Horizontal or Vertical values. Default is Vertical.

         2 OverFlowMode: Specifies the behavior of ToolBarPanel.

     

    While ToolBarTray  is mainly used to represent the container that handles the layout of a ToolBar,

    which also has two core properties:

         1 IsLocked:  Gets or sets a value that indicates whether a ToolBarcan be moved insideToolBarTray

         2 Orientation: Represents the initial form of ToolBar items in a ToolBarTray.  Default is Horizontal.


    Here is a small example of showing the ToolBarPanel and ToolBarTray :

     

    XAML code: 

     

    <Window x:Class="WpfToolBarDemo.Window1"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        WindowStartupLocation="CenterScreen"

        Title="Window1" Height="400" Width="650">

        <StackPanel>

            <TextBlock Text="ToolBarPanel in ToolBar: " FontWeight="Bold" />

            <ToolBar

              Margin="5" 

              Width="200"

              Height="50">

                <Button>

                    <TextBlock Margin="10">B1</TextBlock>

                </Button>

                <Button>

                    <TextBlock Margin="10">B2</TextBlock>

                </Button>

                <Button>

                    <TextBlock Margin="10">B3</TextBlock>

                </Button>

                <!--ToolBarPanel in ToolBar-->

                <ToolBarPanel ToolBar.OverflowMode="Always" Orientation="Vertical" >

                    <Button>

                        <TextBlock Margin="10">B1</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="10">B2</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="10">B3</TextBlock>

                    </Button>

                </ToolBarPanel>

            </ToolBar>

            <Rectangle  Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"

                        Height="2" Fill="Red"  />

            <TextBlock Text="ToolBarTray contains ToolBar: " FontWeight="Bold" />

            <ToolBarTray IsLocked="True"

                         Orientation="Horizontal">

                <ToolBar

                      Margin="5" 

                      Band="0"

                      BandIndex="0"

                      Width="200"

                      Height="50">

                    <Button>

                        <TextBlock Margin="10">B1</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="10">B2</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="10">B3</TextBlock>

                    </Button>

                </ToolBar>

                <ToolBar

                  Margin="5" 

                  Width="130"

                  Band="1"

                  BandIndex="1"         

                  Height="40">

                    <Button>

                        <TextBlock Margin="5">B1</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="5">B2</TextBlock>

                    </Button>

                    <Button>

                        <TextBlock Margin="5">B3</TextBlock>

                    </Button>

                </ToolBar>

            </ToolBarTray>

        </StackPanel>

    </Window>

    If you are still having some question with, please feel free to ask.

     

    Thanks.


    Jim Zhou -MSFT
    Friday, December 26, 2008 3:11 AM
  • Gaurav Khanna, Jim Zhou,

    Thank you for the explanation.

    I will look into them again (^^)
    Monday, December 29, 2008 12:45 AM