2011-01-18 11 views
0

私は、ユーザーに特定の順序で選択させたいという状況があります(最初にユーザーにデータベースを選択させてから、彼に自分の資格情報を教えてもらいたい)。リストボックス項目を選択範囲に展開するにはどうすればいいですか?

これを行うには、が選択の際にを展開するというリストボックスを作成する作業に挑戦しました。それが展開するようにするには、 (トリックを行います

Visibility="{Binding Path=IsSelected 
      , RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}} 
      , Converter={StaticResource VisibilityOfBool} 
      , ConverterParameter=False}" 

のようなもの)難しいことではありません。

問題は、移行が瞬間的であることです。ユーザーが何が起こったかを見ることは難しいです。

<Page 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:system="clr-namespace:System;assembly=mscorlib" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300" 
    Title="SlidingExpansionOnSelected"> 
    <!--x:Class="TorsSandBox.Pages.SlidingExpansionOnSelected"--> 

    <Page.Resources> 
     <DataTemplate x:Key="daItemTemplate"> 
      <StackPanel Margin="10"> 
       <StackPanel.Triggers> 
         <EventTrigger RoutedEvent="ListBoxItem.Selected"> 
          <EventTrigger.Actions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation 
             Storyboard.TargetName="daTransform" 
             Storyboard.TargetProperty="ScaleY" 
             To="1.0" Duration="0:0:1"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </EventTrigger.Actions> 
         </EventTrigger> 
         <EventTrigger RoutedEvent="ListBoxItem.Unselected"> 
          <EventTrigger.Actions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation 
             Storyboard.TargetName="daTransform" 
             Storyboard.TargetProperty="ScaleY" 
             To="0" Duration="0:0:1"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </EventTrigger.Actions> 
         </EventTrigger> 
       </StackPanel.Triggers> 
       <TextBlock x:Name="Header" Text="{Binding}"/> 
       <Border x:Name="daBorder" 
        BorderThickness="3" BorderBrush="DarkOrange" CornerRadius="5" 
        HorizontalAlignment="Stretch" 
        Margin="20 10 10 10" 
        MinHeight="100" 
        > 
        <Border.LayoutTransform> 
         <ScaleTransform x:Name="daTransform" ScaleX="1" ScaleY="0"/> 
        </Border.LayoutTransform> 
        <TextBlock Text="Hide this until selected" 
         HorizontalAlignment="Center" VerticalAlignment="Center" /> 
       </Border> 
      </StackPanel> 
     </DataTemplate> 
    </Page.Resources> 

    <ListBox 
     HorizontalContentAlignment="Stretch" 
     ItemTemplate="{StaticResource daItemTemplate}" 
     > 
     <system:String>First row</system:String> 
     <system:String>Second row</system:String> 
     <system:String>Third row</system:String> 
     <system:String>Last row</system:String> 
    </ListBox> 
</Page> 

トリガーが動作しませんが、私ができるので、それはです:私は何をしたいとすべきことはここで

は私が何を意味するか実証するためのページです...隠されたパネルのアニメーション拡張したものです誰かがこれを起こす方法を知っていますか?

よろしく TorのThorbergsenは

答えて

1

このようなものは、あまりにも複雑です...あなたのアプローチと間違って何
は、アニメーションだけVisualTreeに下の要素に影響を与えることがありますつまり、コンテナは私が知る限り影響を受けません。
アニメーションのプロパティパスを指定することは大きな苦痛です。私はStackPanel内のボーダーにアクセスできませんでした。その理由は、Childrenプロパティが依存プロパティではなく、構文全体がかなり珍しいからです。私はScaleTransformを抽出し、アニメーションに国境で、それの両方を参照しようとしましたが、それが何らかの理由で動作しませんでした

 <Style TargetType="ListBoxItem"> 
      <Style.Resources> 
       <Storyboard x:Key="OnSelected1"/> 
      </Style.Resources> 
      <Setter Property="Tag"> 
       <Setter.Value> 
        <sys:Double>0</sys:Double> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="ContentTemplate"> 
       <Setter.Value> 
        <DataTemplate> 
         <StackPanel x:Name="stackPanel" Margin="10"> 
          <TextBlock x:Name="Header" Text="{Binding}"/> 
          <Border x:Name="daBorder" 
            BorderThickness="3" BorderBrush="DarkOrange" CornerRadius="5" 
            HorizontalAlignment="Stretch" 
            Margin="20 10 10 10" 
            MinHeight="100"> 
           <Border.LayoutTransform> 
            <ScaleTransform ScaleX="1" ScaleY="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=Tag}"/> 
           </Border.LayoutTransform> 
           <TextBlock Text="Hide this until selected" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
          </Border> 
         </StackPanel> 
        </DataTemplate> 
       </Setter.Value> 
      </Setter> 
      <Style.Triggers> 
       <EventTrigger RoutedEvent="ListBoxItem.Selected"> 
        <EventTrigger.Actions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation 
            Storyboard.TargetProperty="(ListBoxItem.Tag)" 
            Storyboard.TargetName="{x:Null}" 
            To="1.0" Duration="0:0:1"/> 
          </Storyboard> 
         </BeginStoryboard> 
         <BeginStoryboard Storyboard="{StaticResource OnSelected1}"/> 
        </EventTrigger.Actions> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="ListBoxItem.Unselected"> 
        <EventTrigger.Actions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation 
            Storyboard.TargetProperty="(ListBoxItem.Tag)" 
            Storyboard.TargetName="{x:Null}" 
            To="0" Duration="0:0:1"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger.Actions> 
       </EventTrigger> 
      </Style.Triggers> 
     </Style> 


はとにかく、ここで働くハックソリューション、です。

+0

素晴らしい!これはうまくいくかもしれませんが、確かに "ハック"ではありません。このソリューションで改善できる人は誰ですか? –

+0

ようこそ。これはタグの代わりに付加プロパティで解決できますか?それは "すべてのXAML"ソリューションではありませんが、タグを使用するよりも若干優れています... –

+0

答えを受け入れてくれてありがとう、私は付属のプロパティを使用しようとしましたが、 –

0

あなただけの「選択」と「未選択」を使用し、あなたのイベントのListBoxItemプレフィックスを必要はありません。しようとする

別の方法としては、プロパティトリガーである:

https://web.archive.org/web/20120225232943/http://en.csharp-online.net/WPF_Styles_and_Control_Templates%E2%80%94Property_Triggers

+0

1. "ListBoxItem接頭辞を削除すると、例外が発生します..." RoutedEventConverterはSystem.Stringから変換できません " –

+0

2。データテンプレートの一部でアニメーションを実行するプロパティトリガーを作成するにはどうすればよいですか? –

+0

これを解決するスタイルをlistboxitemに定義する方法がいくつかあると思います。リストボックス項目の選択したイベントから、データ型の境界線のスケッチ変換にアクセスすることは問題があるようです。 :-P –

0

EDIT:

[OK]を、私はそれを把握しました。私はこのための(タグを使用する代わりに)添付プロパティを作成しました。

public static class ListBoxHelper 
{ 
    public static readonly DependencyProperty ScaleYAnimationProperty = 
     DependencyProperty.RegisterAttached("ScaleYAnimation", typeof(double), typeof(ListBoxHelper), new FrameworkPropertyMetadata(0d)); 

    public static double GetScaleYAnimation(UIElement element) 
    { 
     return (double)element.GetValue(ScaleYAnimationProperty); 
    } 

    public static void SetScaleYAnimation(UIElement element, double value) 
    { 
     element.SetValue(ScaleYAnimationProperty, value); 
    } 
} 

<ListBox ItemsSource="{Binding Contacts}" HorizontalContentAlignment="Stretch"> 
     <ListBox.Resources> 
      <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}"> 
       <Setter Property="controls:ListBoxHelper.ScaleYAnimation" Value="0"/> 
       <Setter Property="ContentTemplate"> 
        <Setter.Value> 
         <DataTemplate> 
          <StackPanel> 
           <Grid> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="40"/> 
             <ColumnDefinition Width="*"/> 
             <ColumnDefinition Width="Auto"/> 
             <ColumnDefinition Width="100"/> 
            </Grid.ColumnDefinitions> 

            <controls:CircleContentControl Grid.Column="0" Width="40" Height="40"> 
             <Image Source="{Binding Image}"/> 
            </controls:CircleContentControl> 
            <TextBlock Text="{Binding FullName}" Grid.Column="1" Margin="10,0,5,0" VerticalAlignment="Center"/> 
            <TextBlock Text="{Binding PhoneNumber}" Grid.Column="2" VerticalAlignment="Center" FontStyle="Italic"> 
             <TextBlock.LayoutTransform> 
              <ScaleTransform ScaleX="0.7" ScaleY="0.7"/> 
             </TextBlock.LayoutTransform> 
            </TextBlock> 
            <StackPanel Orientation="Horizontal" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center"> 
             <Button cal:Message.Attach="Call($dataContext)" Width="30" Height="30" Style="{StaticResource ContactDialButtonStyle}"> 
              <Rectangle Width="10" Height="10" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"> 
               <Rectangle.OpacityMask> 
                <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_phone}" /> 
               </Rectangle.OpacityMask> 
              </Rectangle> 
             </Button> 
            </StackPanel> 
           </Grid> 
           <Border x:Name="daBorder" 
           BorderThickness="3" BorderBrush="DarkOrange" CornerRadius="5" 
           HorizontalAlignment="Stretch" 
           Margin="20 10 10 10" 
           MinHeight="100"> 
            <Border.LayoutTransform> 
             <ScaleTransform ScaleX="1" ScaleY="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=(controls:ListBoxHelper.ScaleYAnimation)}"/> 
            </Border.LayoutTransform> 
            <TextBlock Text="Hide this until selected" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
           </Border> 
          </StackPanel> 
         </DataTemplate> 
        </Setter.Value> 
       </Setter> 
       <Style.Triggers> 
        <EventTrigger RoutedEvent="ListBoxItem.Selected"> 
         <EventTrigger.Actions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation 
           Storyboard.TargetProperty="(controls:ListBoxHelper.ScaleYAnimation)" 
           Storyboard.TargetName="{x:Null}" 
           To="1.0" Duration="0:0:1"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger.Actions> 
        </EventTrigger> 
        <EventTrigger RoutedEvent="ListBoxItem.Unselected"> 
         <EventTrigger.Actions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation 
           Storyboard.TargetProperty="(controls:ListBoxHelper.ScaleYAnimation)" 
           Storyboard.TargetName="{x:Null}" 
           To="0.0" Duration="0:0:1"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger.Actions> 
        </EventTrigger> 
       </Style.Triggers> 
      </Style> 
     </ListBox.Resources> 
    </ListBox> 

私は、@ H.Bソリューションを使用しています。これは、リストが初めてロードされたときに機能します。私は1 listboxitemを展開する場合は、他のタブに切り替えて、リストボックスがあるタブに戻って、例外がスローされます。

System.Windows.Data Error: 23 : Cannot convert '<null>' from type '<null>' to type 'System.Double' for 'en-US' culture with default conversions; consider using Converter property of Binding. NotSupportedException:'System.NotSupportedException: DoubleConverter não pode ser convertido de (nulo). 
    em System.ComponentModel.TypeConverter.GetConvertFromException(Object value) 
    em System.ComponentModel.TypeConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value) 
    em System.ComponentModel.BaseNumberConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value) 
    em MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o, Type destinationType, DependencyObject targetElement, CultureInfo culture, Boolean isForward)' 

System.Windows.Data Error: 6 : 'ObjectSourceConverter' converter failed to convert value '<null>' (type '<null>'); fallback value will be used, if available. BindingExpression:Path=Tag; DataItem='ListBoxItem' (Name=''); target element is 'ScaleTransform' (HashCode=48000142); target property is 'ScaleY' (type 'Double') NotSupportedException:'System.NotSupportedException: DoubleConverter não pode ser convertido de (nulo). 
    em MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o, Type destinationType, DependencyObject targetElement, CultureInfo culture, Boolean isForward) 
    em MS.Internal.Data.ObjectSourceConverter.Convert(Object o, Type type, Object parameter, CultureInfo culture) 
    em System.Windows.Data.BindingExpression.ConvertHelper(IValueConverter converter, Object value, Type targetType, Object parameter, CultureInfo culture)' 

は誰でも、あまりにもこれを持ちますか?

関連する問題