CODEWITHSUNDEEP
wpfxaml
Sebastian
Sebastian

Reputation: 4811

Stretch WPF Dockpanel contents horizontally

I have a DockPanel and it contains a ScrollViewer [ center aligned ] and a button on left and right . My xaml is like 

  <DockPanel LastChildFill="True">
 <Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch" DockPanel.Dock="Left">Left</Button>
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch" DockPanel.Dock="Right">Right</Button>
  <ScrollViewer Name="scrollAreaPageView"  HorizontalAlignment="Center" VerticalAlignment="Center" 
                                HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"    
</ScrollViewer>
</DockPanel>

And it generates the output as expected , but Left and right butons are not stretched fully to left and right to the ScrollViewer( They are on corners only). The screen shot of output is enter image description here

How can i make it stretch fully to left and right of center scrollViewer

Upvotes: 1

Views: 3048

Answers (1)

pushpraj
pushpraj

Reputation: 13669

A DockPanel may not be ideal in this scenario you may perhaps use Grid here with the desired column definition

sample

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button>Left</Button>
    <ScrollViewer Name="scrollAreaPageView"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  Grid.Column="1">
    </ScrollViewer>
    <Button Grid.Column="2">Right</Button>
</Grid>

in above example the space available after subtracting the space required b

Alternate approach

I attempted to do it pure xaml, this approach will helo you achieve the desired without code behind. here is the example

<Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="{Binding ActualWidth,ElementName=scrollAreaPageView}" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button>Left</Button>
        <Button Grid.Column="2">Right</Button>
    </Grid>
    <ScrollViewer HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  Margin="50,0"
                  Name="scrollAreaPageView"
                  HorizontalScrollBarVisibility="Auto">

    </ScrollViewer>
</Grid>

Margin in the scrollAreaPageView element defines minimum width of the buttons. give it a try and see if that helps

Upvotes: 1

Related Questions