开发者

Move the listbox items instead of the "selector bar"

1-Is it possible to move the listbox items instead of the "selector bar". In that way, the selector bar has a static position but the items will move.

what Im trying to achieve is something like the scrollbar at the bottom of this image: http://i.afterdawn.com/storage/pic开发者_如何学Gotures/plex_netflix_addon_3.png

2-is Listbox with horizontal orientation the appropriate tool to implement a thumbnail viewer like the one in the example?

3-I want it to be animated in the future updates? possible?


Below code implements 1 and 2. The item in the middle of the horizontal listbox is always selected. The listbox need some styling to look good, like using Opacity to show which items are displayed and not.

XAML:

<Window x:Class="FlowListTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
    <ListBox  
        ItemsSource="{Binding Path=Items}"
        ScrollViewer.HorizontalScrollBarVisibility="Auto"
        ScrollViewer.ScrollChanged="OnScrollChanged"
        SelectionChanged="OnSelectionChanged">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border CornerRadius="10" BorderBrush="Red" BorderThickness="2">
                    <TextBlock Text="{Binding}" Margin="5" Width="20" Height="100"/>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Window>

Code behind:

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace FlowListTest
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            DataContext = this;
        }

        public IEnumerable<string> Items
        {
            get
            {
                for (int i = 0; i < 100; i++)
                {
                    yield return i.ToString();
                }
            }
        }

        private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            (sender as ListBox).SelectedIndex = _selectedIndex;
        }

        private void OnScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            _selectedIndex = (int)(e.HorizontalOffset + Math.Truncate(e.ViewportWidth / 2));
            (sender as ListBox).SelectedIndex = _selectedIndex;
        }

        private int _selectedIndex;
    } 
}


Check the ElementFlow component in FluidKit

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜