Click here to Skip to main content
15,884,963 members
Please Sign up or sign in to vote.
5.00/5 (2 votes)
See more:
Hi
I wish to have an itemscontrol scroll when it does not fit on the screen but to take as little space as possible.

Let's say I have a grid with 3 columns, a label in column 0, an items control in column 1 and a button in column 2. I wish for the label to remain on the left, and the button to remain left aligned but for the button to remain in view even when the itemscontrol is too big.

what i have is an itemscontrol with its itemtemplate set as a horizontal stackpanel and this itemcontrol is wrapped in a scrollviewer so that it scrolls when there is no space remaining. this works if i set the column width to be auto, * and auto respectively however i wish for the itemscontrol to be as small as its content and for the button to be adjacent, to achieve this I would need itemscontrol to be auto or for the column holding the button to be *.

the problem with this is if i set the column holding the button to be * all i can do to the middle column is make it a fixed width or auto, if set to auto the scrollbar never appears, something to do with stackpanel having infinite size.

Here is the code I have so far, I hope I have explained my requirements clearly?

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

            <Label Content = "Blah"
Grid.Column="0"/>

        <ScrollViewer Grid.Column="1"
                      HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Disabled">
            <ItemsControl ItemsSource="{Binding StringInfos}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Width="300"
                                HorizontalContentAlignment="Stretch">
                            <Button.Content>
                                <Border BorderThickness="1"
                                        BorderBrush="Black">
                                    <Grid Grid.Column="0"
                                          removed="Transparent">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="30" />
                                            <RowDefinition Height="30"/>
                                            <RowDefinition Height="100"/>
                                        </Grid.RowDefinitions>
                                        <Label Content="{Binding Pressure}"
                                               HorizontalAlignment="Center"
                                               Grid.Row="0"/>
                                        <Label Content="{Binding FluidDensity}"
                                               HorizontalAlignment="Center"
                                               Grid.Row="1"/>
                                    </Grid>
                                </Border>
                            </Button.Content>
                        </Button>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <DockPanel  />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>

        <Button Grid.Column="2"
                Command="{Binding AddStringInfoCommand}"
                VerticalAlignment="Top"
                Content="Add"/>
    </Grid>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900