2 Replies - 5849 Views - Last Post: 19 November 2013 - 06:36 AM Rate Topic: -----

#1 AndrewMack  Icon User is offline

  • D.I.C Head

Reputation: 10
  • View blog
  • Posts: 55
  • Joined: 12-April 13

How to make a ScrollView scroll vertically?

Posted 19 November 2013 - 06:31 AM

Hi!

I'm still pretty new to WPF (and to C#/.NET in general) and, well, I could really use some help with an issue I'm having.

I'm trying to create my own colour selector - I just wanted to do it to see if I could, really, figured it could be an interesting project that would get me learning (and it has!).

So, my problem... (pictures & code at bottom of this post)

I've got a ListView to display colours that a User could "save" for quick access - of course, similar to the standard colour selector. What's wrong is when the ListView gets too many colours instead of scrolling vertically it just keeps extending vertically which clips the ListView AND pushes the buttons underneath the ListView off the screen.

How can I make the ListView control scroll vertically?

Pictures
Posted ImagePosted Image

Code
<Window x:Class="MyColourSelector.SelectColour"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SelectColour" Height="346" Width="605"
        x:Name="WIN_SelectColour"
        DataContext="{Binding RelativeSource={RelativeSource Self}}"
        MinWidth="565"
        MinHeight="300" SizeChanged="WIN_SelectColour_SizeChanged">
    <Grid>
        <DockPanel>
            <DockPanel Background="#F4f4f4" >
                <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Margin="4" DockPanel.Dock="Top">
                    <GroupBox Margin="2" Padding="2" Width="190" BorderThickness="0">
                        <StackPanel>
                            <Label Content="Basic Colours" />
                            <WrapPanel HorizontalAlignment="Stretch">
                                <ListView ItemsSource="{Binding BasicColours, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" >
                                    <ListView.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <WrapPanel Orientation="Horizontal" ItemHeight="24" ItemWidth="24" Margin="0" />
                                        </ItemsPanelTemplate>
                                    </ListView.ItemsPanel>
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <Rectangle Width="14" Height="14" Fill="{Binding MediaBrush}" Margin="0" Stroke="Black" StrokeThickness="1" />
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </WrapPanel>
                        </StackPanel>
                    </GroupBox>
                    <GroupBox x:Name="GPBOX_CustomColours" Margin="2" Padding="2" Width="190" BorderThickness="0">
                        <StackPanel>
                            <Label Content="Custom Colours" />
                            <WrapPanel HorizontalAlignment="Stretch">
                                <ListView ItemsSource="{Binding CustomColours, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True">
                                    <ListView.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <WrapPanel Orientation="Horizontal" ItemHeight="24" ItemWidth="24" Margin="0" />
                                        </ItemsPanelTemplate>
                                    </ListView.ItemsPanel>
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <Rectangle Width="14" Height="14" Fill="{Binding MediaBrush}" Margin="0" Stroke="Black" StrokeThickness="1" >
                                            </Rectangle>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </WrapPanel>
                        </StackPanel>
                    </GroupBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" DockPanel.Dock="Bottom" Margin="8">
                    <Button Content="Okay" Width="64" />
                    <Button Content="Cancel" Width="64" Margin="4,0,0,0"/>
                </StackPanel>
            </DockPanel>
            <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <DockPanel Background="#F4F4F4" Margin="4">
                    <StackPanel Orientation="Horizontal"  DockPanel.Dock="Bottom">
                        <StackPanel Orientation="Vertical">
                            <Rectangle Width="80" Height="48" Fill="{Binding SelectedColourBrush}" VerticalAlignment="Top" />
                            <Label Content="Selected Colour" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Width="110">
                            <DockPanel Margin="2">
                                <TextBox HorizontalAlignment="Stretch" Margin="2,0,0,0" DockPanel.Dock="Right" Width="40" Text="{Binding SelectedColour.MediaColour.R, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
                                <Label Content="Hue:" HorizontalAlignment="Right" />
                            </DockPanel>
                            <DockPanel Margin="2">
                                <TextBox HorizontalAlignment="Stretch" Margin="2,0,0,0" DockPanel.Dock="Right" Width="40" />
                                <Label Content="Sat:" HorizontalAlignment="Right" />
                            </DockPanel>
                            <DockPanel Margin="2">
                                <TextBox HorizontalAlignment="Stretch" Margin="2,0,0,0" DockPanel.Dock="Right" Width="40" />
                                <Label Content="Lum:" HorizontalAlignment="Right" />
                            </DockPanel>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Width="110">
                            <DockPanel Margin="2">
                                <TextBox HorizontalAlignment="Stretch" Margin="2,0,0,0" DockPanel.Dock="Right" Width="40" />
                                <Label Content="Red:" HorizontalAlignment="Right" />
                            </DockPanel>
                            <DockPanel Margin="2">
                                <TextBox HorizontalAlignment="Stretch" Margin="2,0,0,0" DockPanel.Dock="Right" Width="40" />
                                <Label Content="Green:" HorizontalAlignment="Right" />
                            </DockPanel>
                            <DockPanel Margin="2">
                                <TextBox HorizontalAlignment="Stretch" Margin="2,0,0,0" DockPanel.Dock="Right" Width="40" />
                                <Label Content="Blue:" HorizontalAlignment="Right" />
                            </DockPanel>
                        </StackPanel>
                    </StackPanel>
                    <DockPanel Margin="4">
                        <Border BorderBrush="DarkGray" DockPanel.Dock="Right" BorderThickness="1" Margin="4,0,0,0">
                            <Rectangle Width="20" Fill="{Binding WhiteToBlackBrush}" Margin="1" />
                        </Border>
                        <Grid DockPanel.Dock="Left">
                            <Border BorderBrush="DarkGray" DockPanel.Dock="Right" BorderThickness="1" >
                                <Rectangle x:Name="RECT_AllColours" Fill="{Binding AllColoursBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="1" PreviewTextInput="RECT_AllColours_PreviewTextInput" MouseMove="RECT_AllColours_MouseMove" MouseLeftButtonDown="RECT_AllColours_MouseLeftButtonDown" />
                            </Border>
                            <Rectangle x:Name="RECT_Grey" Fill="{Binding GreyBrush}" Cursor="Cross" Margin="1" MouseLeftButtonDown="RECT_Grey_MouseLeftButtonDown" MouseMove="RECT_Grey_MouseMove" />
                            
                        </Grid>
                    </DockPanel>
                </DockPanel>
            </DockPanel>
        </DockPanel>
    </Grid>
</Window>



Is This A Good Question/Topic? 0
  • +

Replies To: How to make a ScrollView scroll vertically?

#2 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6507
  • View blog
  • Posts: 14,377
  • Joined: 02-June 10

Re: How to make a ScrollView scroll vertically?

Posted 19 November 2013 - 06:35 AM

Since this is just a continuation of your last question:
http://www.dreaminco...1&#entry1932054

Next time, please keep it to the same thread. Otherwise we get 25 threads on the same thing that are especially, "Ok, now the next step", "Now this next step", "Now what do I do for step 3 of this same project?"
Was This Post Helpful? 0
  • +
  • -

#3 AndrewMack  Icon User is offline

  • D.I.C Head

Reputation: 10
  • View blog
  • Posts: 55
  • Joined: 12-April 13

Re: How to make a ScrollView scroll vertically?

Posted 19 November 2013 - 06:36 AM

Ah, sorry - figured it was strictly WPF-related. My bad!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1