I have a usercontrol in wpf xaml which displays image in 4X4 grid. But im not able to scroll with my mouse scroll wheel and scroll bar does not move with my mouse scroll wheel.
I can move scroll bar only by clicking on it and dragging. Also my view is not changing dynamically when i move my scroll bar .Only when it settles down at a certain position, view of 4X4 grid images change.
How to fix these issues?
Here is what i have tried :
<UserControl x:Class="ImageGridView.View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:attachedProperties="clr-namespace:Project4X4.Properties;assembly=Hello.Project4X4"
xmlns:views="clr-namespace:ImageGridView.View.Views"
mc:Ignorable="d"
Name="ParentUserControl"
d:DesignHeight="350" d:DesignWidth="350" Loaded="OnLoad" Unloaded="OnUnload">
<UserControl.Resources>
<views:ScrollValueConverter x:Key="myScrollValueConverter"/>
</UserControl.Resources>
<Grid Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.RowSpan="3" Grid.ColumnSpan="2" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ItemsControl Name="myItemControl" ItemsSource="{Binding DisplayedImages, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<views:CustomPanel Rows="{Binding ViewData.Rows, Mode=OneWay}" Columns="{Binding ViewData.Columns, Mode=OneWay}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<views:ImageTile Margin="5" Name="myImageTile" SourceImage="{Binding Source, Mode=OneWay}" Selected="{Binding Selected}" Focused="{Binding Focused}"/>
<StackPanel Margin="5, 10, 0, 0" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock Text="{Binding ImageNo}" FontSize="12" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding Plane}" FontSize="12" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<Button Name="GoToTopButton" Grid.Row="0" Grid.Column="2" Click="TopClick">
<Path Fill="Blue" Data="M 0 6 L 12 6 L 6 0 Z"/>
</Button>
<ScrollBar Name="myScrollBar" ToolTipService.ShowDuration="60000" Grid.Row="1" Grid.Column="2" Minimum="0" ViewportSize="{Binding ViewData.ViewportSize, Mode=OneWay}" Maximum ="{Binding ViewData.MaxScroll, Mode=OneWay}" SmallChange="1" LargeChange="{Binding LeanModel.ViewData.Rows, Mode=OneWay}" Scroll="ScrollView" Margin="0">
<ScrollBar.Triggers>
<EventTrigger RoutedEvent="Mouse.PreviewMouseDown" >
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Duration="0:0:0:0" Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="myInfoPopup">
<DiscreteBooleanKeyFrame Value="True"></DiscreteBooleanKeyFrame>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.PreviewMouseUp">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Duration="0:0:0:0" Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="myInfoPopup">
<DiscreteBooleanKeyFrame Value="False"></DiscreteBooleanKeyFrame>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ScrollBar.Triggers>
</ScrollBar>
<Button Name="GoToBottomButton" Grid.Row="2" Grid.Column="2" Click="BottomClick" >
<Path Fill="Blue" Data="M 0 0 L 6 6 L 12 0 Z"/>
</Button>
<Popup Grid.Row="0" x:Name="InfoPopup" Grid.RowSpan="3" Grid.Column="1" PlacementTarget="{Binding ElementName=myGrid}" AllowsTransparency="True" StaysOpen="False" Placement="Mouse" PopupAnimation="Fade">
<Border BorderBrush="White" BorderThickness="1" Background="#FFFFFFFF" >
<TextBlock >
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} {1} {2} {3}">
<Binding Path="ScrollText1"/>
<Binding ElementName="myScrollBar" Path="Value" UpdateSourceTrigger="PropertyChanged" Converter="{StaticResource myScrollValueConverter}" />
<Binding Path="ScrollText2"/>
<Binding Path="ViewData.RowsScroll" Converter="{StaticResource myScrollValueConverter}" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Border>
</Popup>
</Grid>
<UserControl.InputBindings>
<KeyBinding Key="Down" Command="{Binding DownButtonCommand}"/>
<KeyBinding Key="Up" Command="{Binding UpButtonCommand}"/>
<KeyBinding Key="Left" Command="{Binding LeftButtonCommand}"/>
<KeyBinding Key="Right" Command="{Binding RightButtonCommand}"/>
</UserControl.InputBindings>
</UserControl>