WPF/XAML: Managing the control sizes inside a ScrollViewer

I have a TabControl, with a few TabItems inside, Each TabItem has a ScrollViewer because I want all of the controls available if they go outside of the area, which some do (vertically on almost all pages). However, I'm having trouble understanding how to solve the issue here.

One of the ListView items is always very wide and activates the ScrollViewer with the Horizontal scrollbar. Whilst this isn't an issue, the ComboBox at the top of the screen takes on the whole width of the ScrollViewer and so does the dropdown.

ComboBox size problem
How can I change this so that the ComboBox is only the width of the TabItem?
Matt CartlidgeSenior Infrastructure EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ambienceCommented:
The ScrollView will adjust its width to the width of the largest child, there is no way around it.

The only option I see is to customize the ListView and put the ScrollViewer inside it as a View which further parents a container of items.

<ListView>
<ListView.View>
<ScrollViewer>
  <ListBox>...
</ScrollViewer>
</ListView.View>
</ListView>

Open in new window


Inside the Scrollview you can put a listBox, ItemsControl or any other combination that works best. Worst cast it can contain another ListView.

PS: I havent done anything like that but I dont see a reason why it should not work.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Matt CartlidgeSenior Infrastructure EngineerAuthor Commented:
Thanks!
0
Matt CartlidgeSenior Infrastructure EngineerAuthor Commented:
I just got around to trying this and unfortunately it doesn't work.

I get an error when trying to put the ScrollViewer around my GridView.
0
ambienceCommented:
what error?  Also, there might be some working examples on the web.
0
Matt CartlidgeSenior Infrastructure EngineerAuthor Commented:
If I wrap the ScrollViewer around the GridView :-
"Property 'View' does not support the value of type 'ScrollViewer'

If I wrap the ScrollViewer around the ListView.View :-
"The attachable property 'View' was not found in the type 'ListView'

If I wrap the ScrollViewer around the ListView, the scrollbars do not show because the ScrollViewer for the Grid inside the TabItem resizes based on the ListView size rather than the the ScrollViewer wrapped around the ListView.

This is the TabItem XAML in case it clarifies it further :-

                <TabItem x:Name="TabItemOutputs" Style="{DynamicResource StyleTabItem}">
                    <TabItem.Header>
                        <StackPanel>
                            <Viewbox Style="{DynamicResource StyleTextViewboxWindowTitle}">
                                <ContentPresenter ContentTemplate="{DynamicResource icon-output}"/>
                            </Viewbox>
                            <TextBlock Style="{DynamicResource StyleTextBlockTab}">
                            Outputs
                            </TextBlock>
                        </StackPanel>
                    </TabItem.Header>
                    <Grid>
                        <ScrollViewer Style="{DynamicResource StyleScrollViewer}">
                            <StackPanel>
                                <GroupBox Header="Driver Mode" Style="{DynamicResource StyleGroupBox}">
                                    <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                                        <ComboBox MaxWidth="150" x:Name="ComboBoxDriverMode" SelectionChanged="ComboBoxDriverMode_SelectionChanged" Style="{DynamicResource ComboBoxStyle}">
                                            <ComboBoxItem Content="DirectSound"/>
                                            <ComboBoxItem Content="ASIO"/>
                                            <ComboBoxItem Content="DirectSound/ASIO"/>
                                            <ComboBoxItem Content="ASIO/DirectSound"/>
                                            <ComboBoxItem Content="WASAPI"/>
                                        </ComboBox>
                                        <Button x:Name="ButtonDriverModeApply" Click="ButtonDriverModeApply_Click" Width="70" Margin="5,0,0,0" Style="{DynamicResource StyleButtonIcon}">
                                            Apply
                                        </Button>
                                    </StackPanel>

                                </GroupBox>
                                <GroupBox Header="Sound Devices" Style="{DynamicResource StyleGroupBox}">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <ScrollViewer HorizontalScrollBarVisibility="Visible">
                                            <ListView Grid.Row="0" x:Name="ListViewSoundDevices" Style="{DynamicResource StyleListView}">
                                                <ListView.View>
                                                    <GridView>
                                                        <GridViewColumn Header="Description" DisplayMemberBinding="{Binding Description}"/>
                                                        <GridViewColumn Header="Type" DisplayMemberBinding="{Binding TypeString}"/>
                                                        <GridViewColumn Header="Speakers" DisplayMemberBinding="{Binding SpeakerCount}"/>
                                                        <GridViewColumn Header="Swap Rear/Center">
                                                            <GridViewColumn.CellTemplate>
                                                                <DataTemplate>
                                                                    <CheckBox x:Name="CheckSoundDeviceSwapRearCenter" Click="CheckSoundDeviceSwapRearCenter_Click" IsEnabled="{Binding SwapRearCenterAvailable}" IsChecked="{Binding SwapRearCenter, Mode=TwoWay}" Style="{DynamicResource StyleCheckBox}"/>
                                                                </DataTemplate>
                                                            </GridViewColumn.CellTemplate>
                                                        </GridViewColumn>
                                                        <GridViewColumn Header="Config" DisplayMemberBinding="{Binding SpeakerConfigString}"/>
                                                        <GridViewColumn Header="Latency" DisplayMemberBinding="{Binding Latency}"/>
                                                        <GridViewColumn Header="MBL" DisplayMemberBinding="{Binding MBL}"/>
                                                        <GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}"/>
                                                    </GridView>
                                                </ListView.View>
                                            </ListView>
                                        </ScrollViewer>
                                        <StackPanel Grid.Row="1" Orientation="Horizontal">
                                            <Button Margin="5,5,5,5" x:Name="ButtonOutputAdd" Click="ButtonOutputAdd_Click" ToolTip="Add selected Sound Device to Outputs" Style="{DynamicResource StyleButtonIcon}">
                                                <StackPanel Orientation="Horizontal">
                                                    <Viewbox Style="{DynamicResource StyleTextViewboxWindowTitle}">
                                                        <ContentPresenter ContentTemplate="{DynamicResource icon-addfolder}"/>
                                                    </Viewbox>
                                                </StackPanel>
                                            </Button>
                                        </StackPanel>
                                    </Grid>
                                </GroupBox>
                                <GroupBox Header="Outputs" Style="{DynamicResource StyleGroupBox}">
                                    <ListView x:Name="ListViewOutputs" Style="{DynamicResource StyleListView}">
                                        <ListView.View>
                                            <GridView>
                                                <GridViewColumn Header="Enabled">
                                                    <GridViewColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <CheckBox IsChecked="{Binding Enabled, Mode=TwoWay}" Style="{DynamicResource StyleCheckBox}"/>
                                                        </DataTemplate>
                                                    </GridViewColumn.CellTemplate>
                                                </GridViewColumn>
                                                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
                                                <GridViewColumn Header="Mode">
                                                    <GridViewColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <ComboBox x:Name="ComboBoxOutputMode" SelectionChanged="ComboBoxOutputMode_SelectionChanged" SelectedValuePath="Content" SelectedValue="{Binding Mode, Mode=TwoWay}" Style="{DynamicResource ComboBoxStyle}">
                                                                <ComboBoxItem Content="Stereo"/>
                                                                <ComboBoxItem Content="Mono"/>
                                                            </ComboBox>
                                                        </DataTemplate>
                                                    </GridViewColumn.CellTemplate>
                                                </GridViewColumn>
                                                <GridViewColumn Header="Monitor">
                                                    <GridViewColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <CheckBox IsChecked="{Binding Monitor, Mode=TwoWay}" Style="{DynamicResource StyleCheckBox}"/>
                                                        </DataTemplate>
                                                    </GridViewColumn.CellTemplate>
                                                </GridViewColumn>
                                                <GridViewColumn Header="Channel">
                                                    <GridViewColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <ComboBox x:Name="ComboBoxOutputChannel" DropDownOpened="ComboBoxOutputChannel_DropDownOpened"  SelectedValuePath="Content" SelectedValue="{Binding ChannelString, Mode=TwoWay}" Style="{DynamicResource ComboBoxStyle}">
                                                                <ComboBoxItem IsEnabled="{Binding IsModeStereo}" Content="Front"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeStereo}" Content="Rear"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeStereo}" Content="Center/Subwoofer"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeStereo}" Content="Side"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeMono}" Content="Front Left"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeMono}" Content="Front Right"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeMono}" Content="Rear Left"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeMono}" Content="Rear Right"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeMono}" Content="Center"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeMono}" Content="Subwoofer"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeMono}" Content="Side Left"/>
                                                                <ComboBoxItem IsEnabled="{Binding IsModeMono}" Content="Side Right"/>
                                                            </ComboBox>
                                                        </DataTemplate>
                                                    </GridViewColumn.CellTemplate>
                                                </GridViewColumn>
                                                <GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}"/>
                                            </GridView>
                                        </ListView.View>
                                    </ListView>
                                </GroupBox>
                            </StackPanel>
                        </ScrollViewer>
                    </Grid>
                </TabItem>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WPF

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.