C#XAML Listbox colapso al hacer clic

user-interface windows-phone-8.1

Question

Soy nuevo en XAML para Windows Phone 8.1 y tengo algunos problemas con

1. haciendo un Stackpanel seleccionable
2. collapse Item, cuando se hace clic

Mi trabajo hasta ahora se ve así:

Y el Código a eso (corrígeme si hay fallas importantes):

<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>

Este código será envuelto más tarde dentro de un ListBox con Image, Entry 1 y la breve descripción que se enlaza:

<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>

Entonces mi pregunta es: ¿cómo puedo hacer una expansión / colapso agradable de cada Item en el ListBox , cada vez que hago clic en él?

Muchas gracias por adelantado.

Answer 1

La verdadera pregunta es: ¿para qué quieres que se derrumbe? Hay demasiadas formas posibles de colapsar algún elemento de datos visuales. ¿Simplemente desea cambiar la altura del artículo o desea alguna animación elegante que contraiga alguna propiedad?

Si la altura es lo que estás buscando, es bastante fácil. Simplemente adjunte un Tap Event en ese borde suyo. En una nota al margen, es probable que desee editar ItemContainerStyle para tener <Setter Property="HorizontalContentAlignment" Value="Stretch"/> para que el Listbox se extienda por la pantalla, de lo contrario, no es utilizable.

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

Luego, calcule la altura mínima que desea mostrar (asegúrese de que sea realmente utilizable, lo que significa ... Puedo volver a tocarla para mostrar todo sin utilizar un 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
}
}

Código en acción

Esta es solo una solución rápida a su pregunta. Algunas personas aquí preferirían que StoryBoard una animación StoryBoard en la propiedad Height del estado Selected en el VisualStateManager . Si reformula o crea una nueva pregunta que indique explícitamente que desea una solución VisualStateManager , también le proporcionaré una. Buena suerte.