开发者

Zooming an item in Listbox/SurfaceListbox WPF

I am working on SurfaceListbox but I think the logic would apply to normal WPF listbox also.

I have the surfacelistbox with horizontal scroll enabled. It contains close to 20 items. The surfacelistbox is going to be placed in the center of the screen. Now when the user scrolls the listbox, the items move horizontally and based on the size of 开发者_如何学JAVAeach item in the listbox, I have seen generally 3 items are visible at any given time on the screen.

Now what I want to do is, when the user stops scrolling and the 3 items are visible, I want to zoom in the center item i.e. basically enlarge it to highlight it.

Any pointers on how to implement such functionality in WPF would be great. Since the user doesnt make a selection when scrolling I could not use the selectionchanged event to know which one is the center item.


Place the SurfaceListBox in a Grid and bind ScaleTransform to a slider with a range from 1 to 5 centered in the Grid using RenderTransformOrigin="0.5,0.5".

The ItemsSource is set to an ObservableCollection; I include some definitions below for completeness to help others follow. I can provide more code if needed.

Here is the View:

<Window x:Class="SurfaceControls.MainWindow"
    Icon="/Images/logo.gif"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Surface Toolkit Controls" Height="500" Width="600" 
    xmlns:my="http://schemas.microsoft.com/surface/2008" >
  <Window.Resources>
    <DataTemplate x:Key="EquipmentItemStyle">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="{Binding Path=Id}"/>
            <TextBlock Text="{Binding Path=EquipmentName}"/>
            <TextBlock Text="{Binding Path=EquipmentType}"/>
        </StackPanel>
    </DataTemplate>
  </Window.Resources>
  <Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid RenderTransformOrigin="0.5,0.5"  Grid.Row="0">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform 
                    ScaleY="{Binding Path=Value, ElementName=slider}" 
                    ScaleX="{Binding Path=Value, ElementName=slider}"/>
            </TransformGroup>
        </Grid.RenderTransform>
        <my:SurfaceListBox 
                ItemsSource="{Binding Path=Equipment, Mode=TwoWay}" 
                SelectedItem="{Binding Path=SelectedEquipment, Mode=TwoWay}"
                ItemTemplate="{StaticResource ResourceKey=EquipmentItemStyle}" >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </my:SurfaceListBox>
    </Grid>
    <StackPanel Grid.Row="1" Orientation="Horizontal">
        <my:SurfaceSlider Ticks="5" 
                                Width="100" 
                                Minimum="1"
                                Interval="1"
                                Maximum="5"
                                x:Name="slider"
                                VerticalAlignment="Center"
                                Margin="4,4,4,4"/>
    </StackPanel>
  </Grid>
</Window>

Here this collection bound by the ListBox:

private ObservableCollection<Equipment> _equipment = new ObservableCollection<Equipment>();
public ObservableCollection<Equipment> Equipment
{
  get
  {
    return _equipment;
  }
  set
  {
    _equipment = value;
  }
}

And the defintion of the model:

public class Equipment
{
  public int Id { get; set; }
  public string EquipmentName { get; set; }
  public string EquipmentType { get; set; }
}


Got useful information from these two links

http://social.msdn.microsoft.com/Forums/en-US/surfaceappdevelopment/thread/290f18c3-9579-4578-b215-45e6eb702470

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5d486826-9a72-4769-bd09-ff6977e16c30

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜