CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 8 of 8

Thread: How can I use scrollviewer to make it resizable when created button get off screen?

  1. #1
    Join Date
    Aug 2020
    Posts
    14

    How can I use scrollviewer to make it resizable when created button get off screen?

    So basically I have a button that creates button on the right side after let's say 20 clicks my buttons becoming hidden because they become too many to fit in screen. So I wanted to use a scrollviewer so that I can use the scrollbar to view the hidden created buttons that I have created?

    I also use grid with definition so I must set on scrollviewer the row and columns

  2. #2
    Arjay's Avatar
    Arjay is offline Moderator / EX MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    13,478

    Re: How can I use scrollviewer to make it resizable when created button get off scree

    Put the buttons into a StackPanel. Set the height to a fixed value (this will cause the scroll bar to appear when the number of buttons exceed the visible area set by the height).

  3. #3
    Join Date
    Aug 2020
    Posts
    14

    Re: How can I use scrollviewer to make it resizable when created button get off scree

    Quote Originally Posted by Arjay View Post
    Put the buttons into a StackPanel. Set the height to a fixed value (this will cause the scroll bar to appear when the number of buttons exceed the visible area set by the height).

    Your info is innacurate.

    You said put the buttons in a stackpanel and the scrollviewer where? outside of stackpanel?

    Code:
            <Border Padding="10">
    <Grid x:Name="GategoryGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    
        <ScrollViewer>
        <StackPanel Grid.Row="0" Height="100">
            <!--Content-->
                        <Button>Text</Button>
                        <Button>Text</Button>
        </StackPanel>
                    </ScrollViewer>
    
                </Grid>
            </Border>

  4. #4
    Arjay's Avatar
    Arjay is offline Moderator / EX MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    13,478

    Re: How can I use scrollviewer to make it resizable when created button get off scree

    It's been 8 years or so since I've coded WPF, so the memory is failing...

    Fortunately, WPF is easy and there is plenty of help to google. Below code dynamically adds a button to a stack panel and the scrollbar gets added when there are more than 8 button items.

    Note: I didn't dynamically add button handlers - there are several approaches to this. In a real app, you'll want to be able to tell which button click on the handler (even though you can use the same handler for all the buttons).
    Code:
    <Window x:Class="WpfApp1.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:WpfApp1"
            mc:Ignorable="d"
            Title="MainWindow" Width ="275" Height="275">
        <Grid x:Name="CategoryGrid" Width="250px" >
            <Grid.RowDefinitions>
                <RowDefinition Height="200"/>
                <RowDefinition Height="35"/>
            </Grid.RowDefinitions>
            <Border BorderThickness="1" BorderBrush="Black">            
                <ScrollViewer Padding="20" Grid.Row="0" Height="200" VerticalScrollBarVisibility="Auto">
                    <StackPanel x:Name="CategoryStackPanel" Orientation="Vertical">
                    </StackPanel>
                </ScrollViewer>
            </Border>
            <Button Grid.Row="1" Height="20" Width="100" Click="Button_Click">Add Button</Button>
        </Grid>
    </Window>
    C#
    Code:
    namespace WpfApp1
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
    
            {
                CategoryStackPanel.Children.Add(new Button() { Content = $"Button: {++ButtonCount}" });
            }
    
            private int ButtonCount { get; set; }
        }
    }
    Last edited by Arjay; August 29th, 2020 at 03:35 PM.

  5. #5
    Join Date
    Aug 2020
    Posts
    14

    Re: How can I use scrollviewer to make it resizable when created button get off scree

    Quote Originally Posted by Arjay View Post
    The StackPanel inherits from ScrollViewer. If you use a StackPanel and set the Height property as I have I posted, a vertical scrollbar will appear as you add buttons to the StackPanel.
    Code:
    <Border Padding="10">
    <Grid x:Name="CategoryGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Height="100">
            <!--Content-->
                 <Button>Text</Button>
                 <Button>Text</Button>
                 <Button>Text</Button>
                 <Button>Text</Button>
                 <Button>Text</Button>
                 <Button>Text</Button>
        </StackPanel>
      </Grid>
            </Border>
    This is how i managed it on my own but thanks for help!

    Code:
    <Border>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="140"/>
                    <RowDefinition Height="140"/>
                </Grid.RowDefinitions>
    
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="140"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" Grid.Row="0" Margin="10,0,0,0" Height="100" Content="AddCategory" Click="AddCategory_Click" />
    
                <ScrollViewer Grid.Column="1"  Grid.Row="1" Name="ScrollViewer1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible"  CanContentScroll="True">
                    <StackPanel Name="StackPanel1" OverridesDefaultStyle="False"    VerticalAlignment="Top" HorizontalAlignment="Left">
                        <Grid x:Name="GategoryGrid">
    
                            <!--Content-->
    
                        </Grid>
                    </StackPanel>
                </ScrollViewer>
                <Label Content="This is userControl" Grid.Column="1" HorizontalAlignment="Left" Height="100" Margin="61,174,0,-133" Grid.Row="1" VerticalAlignment="Top" Width="496" FontSize="50"/>
    
            </Grid>
        </Border>

  6. #6
    Arjay's Avatar
    Arjay is offline Moderator / EX MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    13,478

    Re: How can I use scrollviewer to make it resizable when created button get off scree

    Try the updated version, but glad you figured it out.

  7. #7
    Join Date
    Aug 2020
    Posts
    14

    Re: How can I use scrollviewer to make it resizable when created button get off scree

    Quote Originally Posted by Arjay View Post
    It's been 8 years or so since I've coded WPF, so the memory is failing...

    Fortunately, WPF is easy and there is plenty of help to google. Below code dynamically adds a button to a stack panel and the scrollbar gets added when there are more than 8 button items.

    Note: I didn't dynamically add button handlers - there are several approaches to this. In a real app, you'll want to be able to tell which button click on the handler (even though you can use the same handler for all the buttons).
    Code:
    <Window x:Class="WpfApp1.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:WpfApp1"
            mc:Ignorable="d"
            Title="MainWindow" Width ="275" Height="275">
        <Grid x:Name="CategoryGrid" Width="250px" >
            <Grid.RowDefinitions>
                <RowDefinition Height="200"/>
                <RowDefinition Height="35"/>
            </Grid.RowDefinitions>
            <Border BorderThickness="1" BorderBrush="Black">            
                <ScrollViewer Padding="20" Grid.Row="0" Height="200" VerticalScrollBarVisibility="Auto">
                    <StackPanel x:Name="CategoryStackPanel" Orientation="Vertical">
                    </StackPanel>
                </ScrollViewer>
            </Border>
            <Button Grid.Row="1" Height="20" Width="100" Click="Button_Click">Add Button</Button>
        </Grid>
    </Window>
    C#
    Code:
    namespace WpfApp1
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
    
            {
                CategoryStackPanel.Children.Add(new Button() { Content = $"Button: {++ButtonCount}" });
            }
    
            private int ButtonCount { get; set; }
        }
    }
    I tried to use yours but the window of the box is too small how to make it wider ?

  8. #8
    Arjay's Avatar
    Arjay is offline Moderator / EX MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    13,478

    Re: How can I use scrollviewer to make it resizable when created button get off scree

    Title="MainWindow" Width ="275" Height="275">

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width




On-Demand Webinars (sponsored)