14

i am win form developer. whenever i want to set any control at top/Bottom/Left/Right position in its container then we just play the controls dock property in winform. so just guide me how can i place a control in its container top/Bottom/Left/Right position in such a way as a result when contain size change then control position will not change in wpf.

after searching google i came to know how filling works with Dock property and it is like

<Window ...Other window props... >
    <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <!-- Canvas items here... -->
    </Canvas>
</Window>

So guide me how to set any control at top/Bottom/Left/Right position in its container with code snippet.

UPDATE

i just come to know dock panel can be use for my requirement like this way

<DockPanel LastChildFill="True">
    <Button Content="Dock=Top" DockPanel.Dock="Top"/>
    <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Right" DockPanel.Dock="Right"/>
    <Button Content="LastChildFill=True"/>
</DockPanel>

any other way can i achieve this without using DockPanel. thanks

3
  • 1
    You could use the DockPanel control.
    – UIlrvnd
    Aug 14, 2013 at 10:49
  • 2
    Why don't you want to use DockPanel? It's what it's there for :P...
    – UIlrvnd
    Aug 14, 2013 at 10:52
  • DockPanel is indeed the right component to do it. You could also use a simple Grid, but DockPanel is appropriate if you have a central element that define the position of the other elements.
    – Arhiman
    Aug 14, 2013 at 11:28

2 Answers 2

17

You can use a Grid, (note the star sizing)

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <!-- If not specified, then Grid.Column="0" Grid.Row="0" are defaults-->
    <Button Content="Dock=Top" Grid.ColumnSpan="3"/>
    <Button Content="Dock=Bottom" Grid.Row="2" Grid.ColumnSpan="3"/>
    <Button Content="Dock=Left" Grid.Row="1"/>
    <Button Content="Dock=Right" Grid.Column="2" Grid.Row="1" />
    <Button Content="LastChildFill=True" Grid.Column="1" Grid.Row="1"/>
</Grid>

You can use margins and alignments (margins are approximate here)

<Grid>
    <Button Content="Dock=Top" VerticalAlignment="Top"/>
    <Button Content="Dock=Bottom" VerticalAlignment="Bottom"/>
    <Button Content="Dock=Left" HorizontalAlignment="Left" Margin="0,35"/>
    <Button Content="Dock=Right" HorizontalAlignment="Right" Margin="0,35" />
    <Button Content="LastChildFill=True" Margin="75,35"/>
</Grid>

You can use StackPanels (this one needs more work to make it fill the space)

<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">        
    <Button Content="Dock=Top" />
    <StackPanel Orientation="Horizontal" >
    <Button Content="Dock=Left" />
        <Button Content="LastChildFill=True" />
        <Button Content="Dock=Right" />
    </StackPanel>
    <Button Content="Dock=Bottom" />
</StackPanel>
3
  • thanks for answer.we use anchor property in winform....is there anything similar in wpf like anchor property?
    – Thomas
    Aug 14, 2013 at 12:21
  • Sounds like its similar to the HorizontalAlignment and VerticalAlignment, try this explanation msdn.microsoft.com/en-us/library/ms751709.aspx There are links to HA and VA in there too.
    – AlSki
    Aug 14, 2013 at 13:48
  • i like to ask u a question because i feel u r sound enough in WPF. is there any site which provide huge sample code for wpf only for developing glossy attractive UI. i search google but found none. if u r aware then please give me those url. thanks
    – Thomas
    Aug 14, 2013 at 14:48
2
 <DockPanel>
    <Button DockPanel.Dock="Left" Content="Left"></Button>
    <Button DockPanel.Dock="Right" Content="Right"></Button>

    <Button DockPanel.Dock="Top" Content="Top"></Button>
    <Button DockPanel.Dock="Bottom" Content="Bottom"></Button>
    <Button DockPanel.Dock="Left" Content="Center" HorizontalAlignment="Center"></Button>

</DockPanel>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.