开发者

ScrollViewer only scrollable when contents minHeight falls below

开发者 https://www.devze.com 2023-02-04 02:19 出处:网络
Lets take this code as basis: <ScrollViewer HorizontalScrollBarVisibility=\"Auto\" VerticalScrollBarVisibility=\"Auto\">

Lets take this code as basis:

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Button
            x:Name="_buttonAdd"
            Grid.Row="0"
            Click="_buttonAdd_Click"
            Content="Daten hinzufügen" />

        <Button
            x:Name="_buttonDel"
            Grid.Row="1"
            Click="_buttonDel_Cli开发者_StackOverflowck"
            Content="Daten löschen" />

        <DataGrid
            x:Name="_dataGrid"
            Grid.Row="2"
            MinHeight="200"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            AutoGenerateColumns="True"
            ItemsSource="{Binding Path=MitarbeiterList}"
            VerticalScrollBarVisibility="Auto">
        </DataGrid>
    </Grid>
</ScrollViewer>

I want the ScrollViewer only to scroll, if the MinHeight of the DataGrid falls below 200. On the other side I want the ScrollViewer not to scroll, if the MinHeight exceeds or in other words: I want the DataGrid to stretch vertically to the visible area and shows its own Scrollbar if necessary.

I hope you guys can solve my problem.

thanks in advance.


Thanks for your answer Wonko. Removing the scrollviewer isn't the key, but I can understand your thoughts. I finally did it my way, with a multibinding on MaxHeight:

<DataGrid
    x:Name="_dataGrid"
    Grid.Column="0"
    Grid.Row="1"
    Grid.ColumnSpan="2"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    AutoGenerateColumns="True"
    ItemsSource="{Binding Path=MitarbeiterList}"
    VerticalScrollBarVisibility="Auto">
   <DataGrid.MaxHeight>
       <Multibinding Converter="{StaticResource MaxHeightConverter}">
           <Binding Path="ActualHeight"
                    ElementName="_hostingWindow" />
           <Binding Path="DataGridLocationPoint" />
       </Multibinding>
   </DataGrid.MaxHeight>
</DataGrid>

The MaxHeightConverter just subtract the ActualHeight of the window with the Y-Coordinate of the DataGrid-Location: So this sets the MaxHeight of the DataGrid always to the remaining available area of the window. The DataGridLocationPoint is set when the size of the window is changed. Like this:

public void dataGrid_SizeChanged(...)
{    
        GeneralTransform transform = dataGrid.TransformToAncestor(this);
        Point DataGridLocationPoint = transform.Transform(new Point(0, 0));
}

(Sorry the code may not run, because I wrote it out of my Brain)


As you've written the code, the Grid will always have a minimum height of 300: 50 each for the first two rows, plus 200 for the DataGrid (as set by its MinHeight property). If the container of this Grid (or, actually, the ScrollViewer you've declared) becomes less than that, the ScrollViewer will show its vertical ScrollBar.

Personally, unless your container is going to be less than the size of the Buttons plus some of the DataGrid, I would simply remove the outer ScrollViewer. I can't tell for sure, but I believe that this will give you the functionality you desire.

The Buttons will always be visible, and the DataGrid will fill the remaining space. If the DataGrid needs more room than is visible, its ScrollBar will automatically show up.

One other thing I would probably do is to put the buttons next to each other horizontally - this will not only clean up the UI, but also save you some real estate. You could even make the row autosize, and size the buttons accordingly.

In summary, it might look something like this (I'd probably make a Style for the buttons as well, but you get the idea):

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Button
        x:Name="_buttonAdd"
        Grid.Column="0"
        Grid.Row="0"
        HorizontalAlignment="Left"
        Margin="5"
        Click="_buttonAdd_Click"
        Content="Daten hinzufügen" />

    <Button
        x:Name="_buttonDel"
        Grid.Column="1"
        Grid.Row="0"
        HorizontalAlignment="Right"
        Margin="5"
        Click="_buttonDel_Click"
        Content="Daten löschen" />

    <DataGrid
        x:Name="_dataGrid"
        Grid.Column="0"
        Grid.Row="1"
        Grid.ColumnSpan="2"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        AutoGenerateColumns="True"
        ItemsSource="{Binding Path=MitarbeiterList}"
        VerticalScrollBarVisibility="Auto">
    </DataGrid>
</Grid>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号