CODEWITHSUNDEEP
wpfxaml
David Green
David Green

Reputation: 1234

WPF - When I Resize A Window Buttons Don't Move

Here's the XAML. Two problems. Frst when the window opens, the 2 buttons are both chopped off at the bottom and 'Save_Search' button is chopped off at the right side. Second problem is when I resize the window the list view gets longer as I intended but the buttons both end up in the middle of the list view, instead of moving in relation to the window border. There wasn't much when I searched on this. 

    Title="Queries" Height="274" Width="540">



<DockPanel Height="Auto" HorizontalAlignment="Stretch" Name="dockPanel1" VerticalAlignment="Stretch" Width="Auto">
    <Grid Height="Auto" Width="Auto" Margin="0,0,0,0">

        <TextBox Height="27" HorizontalAlignment="Left" Margin="256,6,0,0" Name="SearchTermsTextBox" VerticalAlignment="Top" Width="227" 
                  Text="Enter search terms separated by `;`"/>

        <ListView Name="ResultsListView" Margin="6,41,13,48"    ItemsSource="{Binding}" Width="auto">
            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock FontSize="15" FontWeight="Bold" Text="{Binding Name}"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>

            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListViewItem}">
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="Width" Value="Auto" />
                    <Setter Property="FontSize" Value="10.4"  />
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>


        <Button Content="Save Search" Margin="425,203,12.6,17.6"  Name="Save_Search"  Width="96" Height="25"  />
        <Button Name="Query_Button" Content="Ports" Margin="310,203,127.6,0" Height="25" Width="96" VerticalAlignment="Top"></Button>
    </Grid>


</DockPanel>

Upvotes: 3

Views: 8874

Answers (1)

Lukasz M
Lukasz M

Reputation: 5723

By default HorizontalAlignment and VerticalAlignment are both set to stretch the control based on the given margins. This causes incorrect behaviour in your case, because controls are bound to the position specified in margins despite the grid being resized.

In order to fix it, set HorizontalAlignment to Right and VerticalAlignment to Bottom. This will make the button to stick to the right and bottom borders.

You should also modify margin value to have value 0 for both left and top margins, so the buttons can be displayed even if Grid size is less than 425, 203. Otherwise, only part of the button or no button may be visible.

Try to use the following code for the buttons:

<Button Content="Save Search" Margin="0,0,12.6,17.6"  Name="Save_Search"  Width="96" Height="25" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
<Button Name="Query_Button" Content="Ports" Margin="0,0,127.6,0" Height="25" Width="96" HorizontalAlignment="Right" VerticalAlignment="Bottom"></Button>

Upvotes: 6

Related Questions