单击C#XAML列表框崩溃

Question

我是Windows Phone 8.1的XAML的新手,并且遇到了一些麻烦

1. 使Stackpanel可点击
2. 单击时折叠项目

到目前为止我的工作看起来像这样:

和守则(请纠正我,如果有重大缺陷):

<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
        <StackPanel Orientation="Horizontal">
            <StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
                <Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
            </StackPanel>
            <StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
                <TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
                <TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
            </StackPanel>
        </StackPanel>
    </Border>

此代码稍后将包含在ListBox带有Image,Entry 1和绑定的简短描述的内部:

<ListBox x:Name="ListBox1" Margin="0"
     Width="400" Height="200" HorizontalAlignment="Left"
     ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
        <ListBox.ItemTemplate>
            <DataTemplate>

                // the code above

            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

所以我的问题是:每当我点击它时,我怎么能在每个Item中进行漂亮的扩展/折叠ListBox？

非常感谢你提前.

Answer 1

真正的问题是,你想让它崩溃到什么地步？折叠某些可视数据项的方法太多了.你只是想改变项目的高度,还是想要一些折叠某些属性的奇特动画？

如果您正在寻找高度,那就非常容易了.只需Tap Event在你的边界上附上一个.在旁注中,您可能希望编辑它ItemContainerStyle以<Setter Property="HorizontalContentAlignment" Value="Stretch"/>使Listbox将在屏幕上延伸,否则它将无法使用.

<ListBox.ItemTemplate>
    <DataTemplate>
        <Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
            <StackPanel>
                <!--- rest of template --->
            </StackPanel>
        </Border>
    </DataTemplate>
</ListBox.ItemTemplate>

然后计算你想要显示的最小高度(确保它实际上是可用的,意思是......我可以再次点击它来显示整个事物而不使用Mag Glass).

private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    int minHeight = 40;                // change to whatever you want
    Border b = sender as Border;
    if (b.ActualHeight > minHeight)
    {
        b.Height = minHeight;
    }
    else
    {
        b.Height = double.NaN;         // this will change the height back to Auto, showing everything
    }
}

代码在行动

这只是您问题的快速解决方案.这里的一些人宁愿让你StoryBoard在Selected国家的高度属性上创建一个动画VisualStateManager.如果您重新编写或创建一个明确说明您想要VisualStateManager解决方案的新问题,我也会为您提供一个解决方案.祝好运.