wpf Select Multiple ListboxItems(i.e, Images) using Keyboard[Ctrl + RightArrow/leftArrow]

See more:

WPF

I Have grouped the listbox items,i can able to select "Multiple" items by SelectionMode="Extended" or "Multiple". Now i have got two issues and one more thing in "Sorting"

1.When
[ SelectionMode="Extended"]
i can select Multiple Items by pressing and selecting the items using Mouse, once i move the mouse to the others controls,i'm losing my selection.

2.I'm unable to select Multiple items using Keyboard and unable to travel to listboxItems(i.e,) "Images" using Arrow Keys.

3.I want to sort/Arrange the grouped Items. could anybody guide over these..thnx in advance

In code behind i have handled KeyUp for ListBox so that the travelling to the listbox items are Not happening, if i don't handle KeyUp event , i'm able to travel. Further when toggling selection is not working while handling KeyUp event. Andalso i want to auto scroll to set focus to the selected item

g="xml">
 <CollectionViewSource x:Key="CharacterCollectionView" 
    Source="{Binding}" >
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="Name" />
         </CollectionViewSource.GroupDescriptions>
        <!--<CollectionViewSource.SortDescriptions>
            <cm:SortDescription PropertyName="First" />
        </CollectionViewSource.SortDescriptions>-->
    </CollectionViewSource>
    <ItemsPanelTemplate x:Key="HorizontalItemsPanel">
        <WrapPanel  Orientation="Horizontal" HorizontalAlignment="Stretch" />
    </ItemsPanelTemplate>
           <Style x:Key="myListboxStyle">
        <Style.Resources>
            <!-- Background of selected item when focussed -->
            <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#66000000" Offset="0" />
                <GradientStop Color="#33000000" Offset="1" />
            </LinearGradientBrush>
            <!-- Background of selected item when not focussed -->
            <LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#66000000" Offset="0" />
                <GradientStop Color="#33000000" Offset="1" />
            </LinearGradientBrush>
        </Style.Resources>
    </Style>

</Window.Resources>
    <DockPanel>
    <StackPanel Orientation="Vertical" DockPanel.Dock="Left" removed="#336699" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
    <ListBox
        Margin="20,20,20,5" DataContext="{Binding}"
        ItemsSource="{Binding Source={StaticResource CharacterCollectionView}}" 
        DockPanel.Dock="Top" x:Name="MyList" MouseEnter="MyListEvent"
        Width="700" SelectionMode="Extended"    Style="{StaticResource myListboxStyle }"
        Height="700" removed="LightGray" IsSynchronizedWithCurrentItem="True" 
        ScrollViewer.CanContentScroll="True" SelectedIndex="1"
        ScrollViewer.VerticalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"   
        ScrollViewer.HorizontalScrollBarVisibility="Disabled" PresentationTraceSources.TraceLevel="High"  >
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Margin" Value="1"/>
                <Setter Property="BorderBrush" Value="Green"/>
                <Setter Property="Width" Value="{Binding Path=Value, ElementName=sizeSlider, Mode=TwoWay}"/>
                <Setter Property="Height" Value="{Binding Path=Value, ElementName=sizeSlider, Mode=TwoWay}"/>
                                           <!--<Style.Triggers>
                    <Trigger Property="IsKeyboardFocusWithin" Value="True">
                        <Setter Property="IsSelected" Value="True" />
                    </Trigger>
                </Style.Triggers>-->
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" HorizontalAlignment="Stretch" removed="LightSteelBlue"   />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Viewbox Stretch="Fill" HorizontalAlignment="Stretch" >
                    <Border BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding}" BorderBrush="IndianRed"   Margin="0" Height="Auto">
                        <DockPanel>
                            <Image
                                DockPanel.Dock="Top"
                                Width="150" Margin="5"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Height="Auto"  x:Name="Myimage"
                                Source="{Binding Path=ImageFilepath[0]}"/>
                            <Grid>
                                <Label Content="{Binding Path=Name[0]}" HorizontalContentAlignment="Center" FontWeight="Normal"   FontSize="13"  />
                            </Grid>
                        </DockPanel>
                    </Border>
                </Viewbox>
            </DataTemplate>
        </ListBox.ItemTemplate>
                 <ListBox.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" FontSize="18"  Height="Auto" removed="Transparent" FontWeight="Medium"  />
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal"     HorizontalAlignment="Stretch" removed="White"        />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <GroupBox Header="{Binding Name}" BorderBrush="#336699" BorderThickness="2" Margin="5">
                                            <ItemsPresenter />
                                       </GroupBox>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
           </ListBox.GroupStyle>
        </ListBox>
    <StackPanel Grid.Row="1" HorizontalAlignment="Center" Orientation="Horizontal" Margin="2,0,5,5">
        <TextBlock Width="Auto" Text="Min" Foreground="White" FontWeight="Bold" FontSize="14"  Margin="2" Padding="0" HorizontalAlignment="Right"  />
        <Slider
        Name="sizeSlider"
        Width="300" Orientation="Horizontal"  
        Value="200" removed="PowderBlue"      
        IsSnapToTickEnabled="True"
        Minimum="150" Maximum="250"
        TickPlacement="BottomRight"
        TickFrequency="50"
        AutoToolTipPrecision="10"
        AutoToolTipPlacement="TopLeft"  
        IsDirectionReversed="False"   
        IsMoveToPointEnabled="False" />
            <TextBlock Width="Auto" Text="{Binding Value, ElementName=sizeSlider}" Foreground="White" FontWeight="Bold" FontSize="14"  Margin="2" Padding="0" />
    </StackPanel>