none
Position of control should be fixed

    Question

  • Hi,

     

    How to change the position of controls from absolute  to fixed in WPF design.

     

    Please Help me.

     

    Priya

     

     

     

    Monday, December 10, 2007 5:47 AM

Answers

  • Can you give some more specific details?  Absolute and fixed arent mutually exclusive terms...  for instance, and absolute path to a file might be fixed or might change randomly.

     

    Specifically a .xaml snippet of what you have currently and a description of your goal would help a lot.   

     

    That said, varying your containing Panel's type is the easiest way to radically affect layout. 

     

    Canvas : Used for Absolute positioning (coordinate based)

    Grid : Used to create a compartmentalized, rectangle based layout.  Can be fixed width/height or can vary dynamically based off proportional values specified in Row/ColumnDefinitions

    StackPanel: Stacks elements left to right or top to bottom. 

    ... etc.

     

     

    HTH,

    Matt

     

    Monday, December 10, 2007 10:42 PM
    Moderator
  • You need to use a layout control like Grid, then from either XAML or code you can create rows and columns and specify their size attributes and then put your controls in the right cells.  Some cells will size and others will stay the same size based on how you define them.

     

    Look at this example:

     

    http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=2485552&SiteID=1

     

    Tom

    Wednesday, December 12, 2007 1:05 PM
  • I think you should consider having a look at some ContentControls and decide wich is best for the behavior you desire. Namely:

    - Canvas - a virtual container with no boundaries and absolute position related to margins, not that good for different alignments within;

    - Grid - the says it all regarding columns and rows, but is a very manageable Control (a Canvas with plus), with different possible alignment for each object within.

    - Panels (DockPanel, WrapPanel, StackPanel) - are all basically a Grid with predifined useful behaviors like the LastChildFill.

     

    For instance, if you define a Row/Column Height/Width with an auto fill of the rest space remaining, you could be using a behaviour that is defined in a DockPanel and works pretty well.

     

    What I'm using in this kind of things is a DockPanel with defined "zones" (child Controls with defined behavior). Something like this:

     

    Let's assume I want to have:

    - a header line on the top (like a titlebar);

    - a thumbnail list on the left;

    - Three buttons on the right bottom corner;

    - and the rest is to be a work area.

     

    I'd end up with some code like this:

     

    <DockPanel Background="Blue" LastChildFill="True">
    <TextBlock Name="Header" Text="Header" Background="Red" Foreground="White" DockPanel.Dock="Top"/>
    <StackPanel Name="Thumbnails" Background="Yellow" DockPanel.Dock="Left" Width="100">
    <TextBlock Text="Thumbnail 1"/>
    <TextBlock Text="Thumbnail 2"/>
    <TextBlock Text="Thumbnail 3"/>
    <TextBlock Text="Thumbnail 4"/>
    </StackPanel>
    <Grid Background="Green">
    <StackPanel Background="Cyan" VerticalAlignment="Bottom" HorizontalAlignment="Right">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    </StackPanel>
    </Grid>
    </DockPanel>

     

    I think this is the kind of behavior you're talking about.

    So, if you want to do it all on your own, a Canvas would be indicated, if you want to use predefined behavior use a Grid or a Panel.

    Wednesday, December 12, 2007 2:51 PM
  • Hi priyarenjith

     

    I think that you may not correctly use Grid and TabControl controls. The following code snippet shows how to use them correctly. I hope this helps. If you hope to know more about these, you could refer to the following links:

    http://msdn2.microsoft.com/en-us/library/ms745058(VS.90).aspx

    http://msdn2.microsoft.com/en-us/library/ms610550(VS.90).aspx

    http://msdn2.microsoft.com/en-us/library/ms612994(VS.90).aspx

     

    Code Block

    <Window x:Class="ForumProjects.MainWindow"

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

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

           x:Name="TheWindow" Title="MainWindow" Height="600" Width="800">

        <StackPanel Name="RootLayout">

            <Grid>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="80"/>

                    <ColumnDefinition Width="100"/>

                    <ColumnDefinition Width="600"/>

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="30"/>

                    <RowDefinition Height="400"/>

                    <RowDefinition Height="30"/>

                </Grid.RowDefinitions>

     

                <TextBlock Grid.Column="0" Grid.Row="0">ID: </TextBlock>

                <TextBox Grid.Column="1" Grid.Row="0"></TextBox>

                <TabControl Grid.Column="2" Grid.Row="0" Grid.RowSpan="2">

                    <TabItem Header="Employee">

                        <Grid>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="80"/>

                                <ColumnDefinition Width="200"/>

                                <ColumnDefinition Width="80"/>

                                <ColumnDefinition Width="200"/>

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="30"/>

                                <RowDefinition Height="30"/>

                                <RowDefinition Height="30"/>

                            </Grid.RowDefinitions>

     

                            <TextBlock Grid.Column="0" Grid.Row="0">Name: </TextBlock>

                            <TextBox Grid.Column="1" Grid.Row="0"></TextBox>

                            <TextBlock Grid.Column="2" Grid.Row="0">Address: </TextBlock>

                            <TextBox Grid.Column="3" Grid.Row="0"></TextBox>

                            <TextBlock Grid.Column="0" Grid.Row="1">Age: </TextBlock>

                            <TextBox Grid.Column="1" Grid.Row="1"></TextBox>

                            <TextBlock Grid.Column="2" Grid.Row="1">Comment: </TextBlock>

                            <TextBox Grid.Column="3" Grid.Row="1"></TextBox>

                        </Grid>

                    </TabItem>

                    <TabItem Header="More...">

                    </TabItem>

                </TabControl>

                <Button Grid.Column="2" Grid.Row="2">OK</Button>

            </Grid>

        </StackPanel>

    </Window>

     

     

    Best Regards,

    Wei Zhou

    Thursday, December 13, 2007 9:15 AM
    Moderator

All replies

  • Can you give some more specific details?  Absolute and fixed arent mutually exclusive terms...  for instance, and absolute path to a file might be fixed or might change randomly.

     

    Specifically a .xaml snippet of what you have currently and a description of your goal would help a lot.   

     

    That said, varying your containing Panel's type is the easiest way to radically affect layout. 

     

    Canvas : Used for Absolute positioning (coordinate based)

    Grid : Used to create a compartmentalized, rectangle based layout.  Can be fixed width/height or can vary dynamically based off proportional values specified in Row/ColumnDefinitions

    StackPanel: Stacks elements left to right or top to bottom. 

    ... etc.

     

     

    HTH,

    Matt

     

    Monday, December 10, 2007 10:42 PM
    Moderator
  • Hi

     

    WPF is different from Windows Form application in layout system. In Windows Form, we use Dock, Anchor and location to set the control position. In WPF, we should base on what type of Panel we are using to determine how can we layout our controls. WPF provides many different panels, such as Grid, StackPanel and Canvas etc, to layout our controls. Base on the different type of panel, we can use Margin, Canvas.SetTop, Canvas.SetLeft etc to customize the layout.

     

    Best Regards,

    Wei Zhou

    Wednesday, December 12, 2007 8:56 AM
    Moderator
  • Hi,

     

     

    thanks for your information.

     

    My problem is,,

     

    I am designing the windows forms in WPF.But when I resize the windows after all design ,the controls should be in the same position.

     

    But now when I make the window small,all the coontrols in the bottom of window will disappear.

     

    Besides, the controls position should be fixed.How can i make it.Is there any property like "Lock"

     

    Please help me

    Priya

    Wednesday, December 12, 2007 11:09 AM
  • Hi,

     

     

    thanks for your information.

     

    My problem is,,

     

    I am designing the windows forms in WPF.But when I resize the windows after all design ,the controls should be in the same position.

     

    But now when I make the window small,all the coontrols in the bottom of window will disappear.

     

    Besides, the controls position should be fixed.How can i make it.Is there any property like "Lock"

     

    Please help me

    Priya

     

    Wednesday, December 12, 2007 11:13 AM
  • You need to use a layout control like Grid, then from either XAML or code you can create rows and columns and specify their size attributes and then put your controls in the right cells.  Some cells will size and others will stay the same size based on how you define them.

     

    Look at this example:

     

    http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=2485552&SiteID=1

     

    Tom

    Wednesday, December 12, 2007 1:05 PM
  • I think you should consider having a look at some ContentControls and decide wich is best for the behavior you desire. Namely:

    - Canvas - a virtual container with no boundaries and absolute position related to margins, not that good for different alignments within;

    - Grid - the says it all regarding columns and rows, but is a very manageable Control (a Canvas with plus), with different possible alignment for each object within.

    - Panels (DockPanel, WrapPanel, StackPanel) - are all basically a Grid with predifined useful behaviors like the LastChildFill.

     

    For instance, if you define a Row/Column Height/Width with an auto fill of the rest space remaining, you could be using a behaviour that is defined in a DockPanel and works pretty well.

     

    What I'm using in this kind of things is a DockPanel with defined "zones" (child Controls with defined behavior). Something like this:

     

    Let's assume I want to have:

    - a header line on the top (like a titlebar);

    - a thumbnail list on the left;

    - Three buttons on the right bottom corner;

    - and the rest is to be a work area.

     

    I'd end up with some code like this:

     

    <DockPanel Background="Blue" LastChildFill="True">
    <TextBlock Name="Header" Text="Header" Background="Red" Foreground="White" DockPanel.Dock="Top"/>
    <StackPanel Name="Thumbnails" Background="Yellow" DockPanel.Dock="Left" Width="100">
    <TextBlock Text="Thumbnail 1"/>
    <TextBlock Text="Thumbnail 2"/>
    <TextBlock Text="Thumbnail 3"/>
    <TextBlock Text="Thumbnail 4"/>
    </StackPanel>
    <Grid Background="Green">
    <StackPanel Background="Cyan" VerticalAlignment="Bottom" HorizontalAlignment="Right">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    </StackPanel>
    </Grid>
    </DockPanel>

     

    I think this is the kind of behavior you're talking about.

    So, if you want to do it all on your own, a Canvas would be indicated, if you want to use predefined behavior use a Grid or a Panel.

    Wednesday, December 12, 2007 2:51 PM
  • Hi,

     

    Thanks for your valuable suggestions.

     

    I have searched through the site and place the dockpanel and grid in for and it is working for normal controls like text box,label etc.

     

    But the probem is with tab control.I have  placed the tab control in the grid,and placed grid in each tabitem.Then it is not working.That is when i resize the window i am unable to see the controls from the bottom side.My requirement is when i resize the window the controls should be in same place.

     

    please help me.

     

    how to work with tab controls and how to manage the position of controls..

     

    plz...can u help me..

     

     

    Regards

    Priya

     

    Thursday, December 13, 2007 7:20 AM
  • Hi priyarenjith

     

    I think that you may not correctly use Grid and TabControl controls. The following code snippet shows how to use them correctly. I hope this helps. If you hope to know more about these, you could refer to the following links:

    http://msdn2.microsoft.com/en-us/library/ms745058(VS.90).aspx

    http://msdn2.microsoft.com/en-us/library/ms610550(VS.90).aspx

    http://msdn2.microsoft.com/en-us/library/ms612994(VS.90).aspx

     

    Code Block

    <Window x:Class="ForumProjects.MainWindow"

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

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

           x:Name="TheWindow" Title="MainWindow" Height="600" Width="800">

        <StackPanel Name="RootLayout">

            <Grid>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="80"/>

                    <ColumnDefinition Width="100"/>

                    <ColumnDefinition Width="600"/>

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="30"/>

                    <RowDefinition Height="400"/>

                    <RowDefinition Height="30"/>

                </Grid.RowDefinitions>

     

                <TextBlock Grid.Column="0" Grid.Row="0">ID: </TextBlock>

                <TextBox Grid.Column="1" Grid.Row="0"></TextBox>

                <TabControl Grid.Column="2" Grid.Row="0" Grid.RowSpan="2">

                    <TabItem Header="Employee">

                        <Grid>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="80"/>

                                <ColumnDefinition Width="200"/>

                                <ColumnDefinition Width="80"/>

                                <ColumnDefinition Width="200"/>

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="30"/>

                                <RowDefinition Height="30"/>

                                <RowDefinition Height="30"/>

                            </Grid.RowDefinitions>

     

                            <TextBlock Grid.Column="0" Grid.Row="0">Name: </TextBlock>

                            <TextBox Grid.Column="1" Grid.Row="0"></TextBox>

                            <TextBlock Grid.Column="2" Grid.Row="0">Address: </TextBlock>

                            <TextBox Grid.Column="3" Grid.Row="0"></TextBox>

                            <TextBlock Grid.Column="0" Grid.Row="1">Age: </TextBlock>

                            <TextBox Grid.Column="1" Grid.Row="1"></TextBox>

                            <TextBlock Grid.Column="2" Grid.Row="1">Comment: </TextBlock>

                            <TextBox Grid.Column="3" Grid.Row="1"></TextBox>

                        </Grid>

                    </TabItem>

                    <TabItem Header="More...">

                    </TabItem>

                </TabControl>

                <Button Grid.Column="2" Grid.Row="2">OK</Button>

            </Grid>

        </StackPanel>

    </Window>

     

     

    Best Regards,

    Wei Zhou

    Thursday, December 13, 2007 9:15 AM
    Moderator
  • You have to do these steps:

    1. Right-click on the TabControl in design mode in Visual Studio or in Blend and choose "Edit Template"->"Edit a Copy...". This will let you copy the default style of the TabControl into your XAML markup.

    2. Once you have done this you need to modify the ControlTemplate slightly. Look for the <TabPanel> element and replace it with a <WrapPanel> element. You don't need to remove or add any attributes. Just change the type of the panel.

    Try it and let us know.

    Reference: https://social.technet.microsoft.com/wiki/contents/articles/40035.wpf-prevent-the-selected-tabitem-from-moving-in-a-tabcontrol.aspx

    Best regards.


    Desarrollador 4 estrellas

    Friday, May 17, 2019 11:39 PM