ScrollViewer is not visible...

JerryM 1,121 Reputation points
2021-05-16T12:14:23.867+00:00

Hi,
I am trying ScrolViewer in WPF and .. it does not work. I see the ScrolViewer in design mode but it disappears when my app is running. Can someone help me why ?

Design Mode:

96858-designer.jpg

Running time:

96859-running.jpg

Here is XAML code: 

<Window x:Class="WpfApp.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:WpfApp"  
        mc:Ignorable="d"  
        Title="MainWindow" Height="480" Width="800" MaxWidth="800" MaxHeight="480">  
    <Grid>  
        <Grid.ColumnDefinitions>  
            <ColumnDefinition Width="500" />  
            <ColumnDefinition Width="300" MaxWidth="300"/>  
        </Grid.ColumnDefinitions>  
  
        <Grid.RowDefinitions>  
            <RowDefinition Height="40" />  
            <RowDefinition Height="440" />  
        </Grid.RowDefinitions>  
  
        <DockPanel Grid.Column="0" Grid.Row="0">  
            <Menu DockPanel.Dock="Top">  
                <MenuItem Header="_File" FontSize="24" FontFamily="Arial">  
                    <MenuItem Header="_New" >  
                        <MenuItem.Icon>  
                            <Image Source="c:\1\WPF-01\Button-Previous-icon.png" />  
                        </MenuItem.Icon>  
                    </MenuItem>  
                    <MenuItem Header="_Open" />  
                    <MenuItem Header="_Save" />  
                    <Separator />  
                    <MenuItem Header="_Exit" />  
                </MenuItem>  
            </Menu>  
        </DockPanel>  
  
        <Button  Grid.Column="0" Grid.Row="1" x:Name="btn001" Content="Hello" Width="200" Height="200" Click="btn001_Click" />  
  
        <TabControl Grid.Column="1" Grid.Row="1"  
                    Width="300"   
                    MaxWidth="300"   
                    Height="440"   
                    VerticalAlignment="Top">  
            <TabItem Header="TabItem" ClipToBounds="True" >  
                <Grid Background="#FFE5E5E5"   
                      Margin="-4,-4,0,0"   
                      Height="Auto"  
                      VerticalAlignment="Stretch"  
                      HorizontalAlignment="Stretch"  
                      >  
  
                    <Grid.ColumnDefinitions>  
                        <ColumnDefinition Width="300" />  
                    </Grid.ColumnDefinitions>  
                    <Grid.RowDefinitions>  
                        <RowDefinition Height="400" />  
                    </Grid.RowDefinitions>  
  
                    <ScrollViewer Grid.Column="0" Grid.Row="0"  
                                  HorizontalAlignment="Stretch"  
                                  VerticalAlignment="Stretch"  
                                  VerticalScrollBarVisibility="Visible"   
                                  HorizontalScrollBarVisibility="Visible"   
                                  Margin="0,0,0,0"  
                                  Padding="0,0"   
                                  >  
                        <StackPanel Name="stackPanel1"   
                                    Width="310"   
                                    Height="800"  
                                    MaxWidth="310">  
                            <GroupBox HorizontalAlignment="Left"   
                                      VerticalAlignment="Top"  
                                      Header="Text"   
                                      Margin="4,4,0,0"   
                                      Padding="0,0"  
                                      Height="401"   
                                      Width="180"   
                                      Background="White" >  
                            </GroupBox>  
                        </StackPanel>  
  
                    </ScrollViewer>  
  
                </Grid>  
            </TabItem>  
            <TabItem Header="TabItem">  
                <Grid Background="#FFE5E5E5"/>  
            </TabItem>  
        </TabControl>  
  
  
    </Grid>  
</Window>
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
786 questions
0 comments
Accepted answer
  1. JerryM 1,121 Reputation points
    2021-05-18T06:57:57.953+00:00

    Wou I finally found the answer. Instead of this:

    Title="MainWindow" Width="800" Height="500" MaxWidth="800" MaxHeight="500">

    I have to use this:

    Title="MainWindow" SizeToContent="WidthAndHeight" WindowStyle="ToolWindow" WindowStartupLocation="CenterScreen">

    and the most important thing is: SizeToContent="WidthAndHeight" ...

    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. DaisyTian-1203 11,621 Reputation points
    2021-05-17T05:28:33.037+00:00

    You do not set ScrollViewer length and width, and the StackPanel's length and width are larger than the TabControl's width and length, so the ScrollViewer is not visible. If you make the window larger, it will make your ScrollViewer work.
    You can set Margin="0,0,18,50" to ScrollViewer to make VerticalScrollBar and HorizontalScrollBar Visible like: 

      <ScrollViewer Grid.Column="0" Grid.Row="0"   
                                   HorizontalAlignment="Stretch"  
                                   VerticalAlignment="Stretch"  
                                   VerticalScrollBarVisibility="Visible"   
                                   HorizontalScrollBarVisibility="Visible"   
                                   Margin="0,0,18,50"  
                                   Padding="0,0"   
                                   >

    By the way, if I misunderstand your question , and please point out.

    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments