2009-09-21 66 views
1

我有以下列表框綁定到圖像URL的數據庫表下面的列表框。當應用程序正在運行時,可以點擊每個單獨的圖像,並在圖像上出現一個淺藍色的選擇框(您可以知道每個單獨圖像何時被選中爲點擊)。我希望能夠做的是在點擊每個圖像時進行縮放。有誰知道我可以通過修改我目前使用的代碼來做到這一點嗎? (這樣做的原因是,我需要在水平列表框,這是這段代碼做什麼來顯示圖像。)C#Silverlight - 放大到水平列表框圖像項目

<ListBox x:Name="list1" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" Width="400" d:LayoutOverrides="HorizontalAlignment"> 
          <ListBox.ItemsPanel> 
           <ItemsPanelTemplate> 
            <StackPanel Orientation="Horizontal"/> 
           </ItemsPanelTemplate> 
          </ListBox.ItemsPanel> 
          <ListBox.ItemTemplate> 
           <DataTemplate > 
            <Image Width="100" Height="100" Stretch="Fill" Source="{Binding LowResUrl}"/> 
           </DataTemplate> 
          </ListBox.ItemTemplate> 
         </ListBox> 

回答

0

您可以使用您目前使用的ItemTemplate這個片段中還有一個模板GeneratedItemContainer(ItemContainerStyle)

<Style x:Key="ListBoxItemStyleContainerWide" TargetType="ListBoxItem"> 
    <Setter Property="Padding" Value="3"/> 
    <Setter Property="HorizontalContentAlignment" Value="Left"/> 
    <Setter Property="VerticalContentAlignment" Value="Top"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="TabNavigation" Value="Local"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListBoxItem"> 
       <Grid x:Name="grid" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5"> 
        <Grid.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform/> 
          <SkewTransform/> 
          <RotateTransform/> 
          <TranslateTransform/> 
         </TransformGroup> 
        </Grid.RenderTransform> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver"> 
            <Storyboard> 
             <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1"/> 
             <ColorAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" To="#FFF6BD43"/> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="00:00:00" Value="#00F6BD43"/> 
            </ColorAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)"> 
             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity"> 
             <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
            </DoubleAnimationUsingKeyFrames> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF6BD43"/> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity"> 
             <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="SelectionStates"> 
          <VisualState x:Name="Unselected"/> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity"> 
             <SplineDoubleKeyFrame KeyTime="0" Value=".75"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unfocused"/> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Rectangle x:Name="fillColor" RadiusX="10" RadiusY="10" IsHitTestVisible="False" Width="950" Height="74" Stroke="Black" StrokeThickness="3"/> 
        <Rectangle x:Name="fillColor2" Fill="#FFEEDEA7" RadiusX="5" RadiusY="5" IsHitTestVisible="False" Opacity="0"/> 
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
        <Rectangle x:Name="FocusVisualElement" StrokeThickness="1" RadiusX="10" RadiusY="10" Visibility="Collapsed"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
0

您可以通過重寫控件模板訪問控制ListBoxItem中的visualStateManager。在Expression Blend中,選擇一個ListBoxItem和模板的「編輯副本」。這將複製舊的ListBoxItem控件的樣式和控件模板,以給出一個很好的起始位置,以修改此ListBox控件設置爲處理的關鍵事件上發生的情況。

做完這些之後,您可以在可視狀態管理器中對各種事件(懸停,選擇,禁用等)應用動畫。

如果你是數據綁定你的ItemsSource屬性,並且沒有文字ListBoxItems來產生一個ListBoxItem樣式從頭開始,只需創建一個新的ListBox並添加一個ListBoxItem到它來生成Style + ControlTemplate。一旦生成了樣式,您可以通過在數據綁定ListBox控件的ItemContainerStyle屬性上指定新創建的資源來更改您的數據綁定ListBox項目的控件模板。