單擊時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其中包含圖像，條目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>

所以我的問題是：每當我單擊它時，如何對ListBox的每個Item進行漂亮的擴展/折疊？

提前非常感謝您。

Answer 1

真正的問題是，您要它塌陷到什么位置？ 折疊某些視覺數據項的方法太多。 您是否只想更改項目的高度，還是想要一些使某些屬性崩潰的精美動畫？

如果高度是您要尋找的高度，那很容易。 只需在您的邊框上附加一個Tap Event 。 在旁注中，您可能希望編輯ItemContainerStyle以使其具有<Setter Property="HorizontalContentAlignment" Value="Stretch"/>以便列表框將在整個屏幕上伸展，否則，它是不可用的。

---

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

---

行動中的代碼

---

這只是您問題的快速解決方案。 此處的某些人希望您在VisualStateManager中的Selected狀態的Height屬性上創建一個StoryBoard動畫。 如果您改寫單詞或創建一個新問題明確表明您想要VisualStateManager解決方案，我也將為您提供解決方案。 祝好運。