views:

75

answers:

0

Hi

I Make this simple list-view(with sample Code's). Also I used styled repeat-Button. so this list view work well but, for scrolling objects within listbox it scroll whole object to down or up :)

So I want to scroll object with animation, I mean scrolled part of object not whole object.(or any better animation) The question is how do this thing? <----

this is my xaml-Code

   <Window.Resources>

    <ControlTemplate x:Key="ListViewTemplate" TargetType="{x:Type ListView}">
        <DockPanel>
            <RepeatButton x:Name="UpButton"
                          DockPanel.Dock="Top"
                          Width="{TemplateBinding Width}" 
                          Height="12"
                          Content="Up"      
                          Visibility="Visible"
                          Command="{x:Static ScrollBar.LineUpCommand}"      
                          CommandTarget="{Binding ElementName=scrollviewer}" Template="{DynamicResource UpRepeatButtonTemplate}"/>
            <RepeatButton x:Name="DownButton" 
                          DockPanel.Dock="Bottom" 
                          Width="{TemplateBinding Width}" 
                          Height="12"
                          Content="Down" 
                          Visibility="Visible"
                          Command="{x:Static ScrollBar.LineDownCommand}"      
                          CommandTarget="{Binding ElementName=scrollviewer}" Template="{DynamicResource DownRepeatButtonTemplate}"/>
            <Border BorderThickness="0" Background="Transparent" Width="{TemplateBinding Width}">
                <ScrollViewer x:Name="scrollviewer" HorizontalAlignment="Center" >
                    <ItemsPresenter />
                </ScrollViewer>
            </Border>
        </DockPanel>
        <ControlTemplate.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.Setters>
                    <Setter TargetName="UpButton" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="DownButton" Property="Visibility" Value="Visible"/>
                </MultiTrigger.Setters>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetName="UpButton"
                                             Storyboard.TargetProperty="Opacity"
                                             To="1"
                                             Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetName="DownButton"
                                             Storyboard.TargetProperty="Opacity"
                                             To="1"
                                             Duration="0:0:0.5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetName="UpButton"
                                             Storyboard.TargetProperty="Opacity"
                                             To="0"
                                             Duration="0:0:0.3"/>
                            <DoubleAnimation Storyboard.TargetName="DownButton"
                                             Storyboard.TargetProperty="Opacity"
                                             To="0"
                                             Duration="0:0:0.3"/>
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.ExitActions>
            </MultiTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="UpRepeatButtonTemplate" TargetType="{x:Type RepeatButton}">
        <Border x:Name="border" Margin="0" VerticalAlignment="Bottom" Height="12" BorderBrush="Black" BorderThickness="0" Width="62" CornerRadius="2,2,0,0" >
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#B2595858" Offset="1"/>
                    <GradientStop Color="#B2A7A7A7"/>
                </LinearGradientBrush>
            </Border.Background>
            <Path x:Name="path" Fill="White" Stretch="Fill" Stroke="White" HorizontalAlignment="Center" Margin="0,4.75,0,3" Width="4.5" Data="M0,8L32,8 16,0z" VerticalAlignment="Bottom"/>

        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Fill" TargetName="path" Value="Orange"/>
                <Setter Property="Stroke" TargetName="path" Value="Orange"/>
                <Setter Property="Background" TargetName="border">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#E5595858" Offset="1"/>
                            <GradientStop Color="#E5A7A7A7"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="DownRepeatButtonTemplate" TargetType="{x:Type RepeatButton}">
        <Border x:Name="border" Margin="0" VerticalAlignment="Top" Height="12" BorderBrush="Black" BorderThickness="0" Width="62" CornerRadius="0,0,2,2" >
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#B2595858" Offset="1"/>
                    <GradientStop Color="#B2A7A7A7"/>
                </LinearGradientBrush>
            </Border.Background>

            <Path x:Name="path" Fill="White" Stretch="Fill" Stroke="White" HorizontalAlignment="Center" Margin="0,4.75,0,3" VerticalAlignment="Bottom" Width="4.5" Data="M0,0L16,8 32,0z"/>

        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Fill" TargetName="path" Value="Orange"/>
                <Setter Property="Stroke" TargetName="path" Value="Orange"/>
                <Setter Property="Background" TargetName="border">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#E5595858" Offset="1"/>
                            <GradientStop Color="#E5A7A7A7"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

</Window.Resources>
<Grid >



    <ListView Height="230" Width="auto"
              VerticalAlignment="Top"
              HorizontalAlignment="Center"
              Margin="0 4 0 0"
              ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
              ScrollViewer.VerticalScrollBarVisibility="Hidden"
              Template="{StaticResource ListViewTemplate}">
        <Button Height="30" Width="60" Content="A"/>
        <Button Height="30" Width="60" Content="B"/>
        <Button Height="30" Width="60" Content="C"/>
        <Button Height="30" Width="60" Content="D"/>
        <Button Height="30" Width="60" Content="E"/>
        <Button Height="30" Width="60" Content="F"/>
        <Button Height="30" Width="60" Content="G"/>
        <Button Height="30" Width="60" Content="H"/>
        <Button Height="30" Width="60" Content="I"/>
        <Button Height="30" Width="60" Content="J"/>
        <Button Height="30" Width="60" Content="K"/>
        <Button Height="30" Width="60" Content="L"/>
        <Button Height="30" Width="60" Content="M"/>
        <Button Height="30" Width="60" Content="N"/>
        <Button Height="30" Width="60" Content="O"/>
        <Button Height="30" Width="60" Content="P"/>
    </ListView>

</Grid>