点击后C＃XAML列表框崩溃 [英] C# XAML Listbox collapse when clicked

问题描述

我在XAML是新的Windows Phone的8.1，并与

一些麻烦

1. 制作的StackPanel可点击


2. 崩溃项目，当点击

我的工作至今看起来像：

和代码到（请纠正我，如果有重大瑕疵）：

 < BORDER CornerRadius =15背景=＃FF595656保证金=0 Grid.ColumnSpan =2HEIGHT =80> 
< StackPanel的方向=横向> 
< StackPanel的宽度=20的Horizo​​ntalAlignment =左VerticalAlignment =顶部/> 
< StackPanel中的Horizo​​ntalAlignment =左身高=80保证金=0,0,0,0VerticalAlignment =中心WIDTH =51> 
<图像的Horizo​​ntalAlignment =左身高=51保证金=0,15,0,0WIDTH =51源=资产/ fish.png拉伸=填充RenderTransformOrigin = 2.307,0.881VerticalAlignment =中心/> 
< / StackPanel的> 
< StackPanel的宽度=10的Horizo​​ntalAlignment =左VerticalAlignment =顶部/> 
< StackPanel中的Horizo​​ntalAlignment =左身高=80保证金=0VerticalAlignment =评出的WIDTH =310> 
< TextBlock中的Horizo​​ntalAlignment =左身高=25保证金=0,20,0,0TextWrapping =自动换行文本=输入1WIDTH =310VerticalAlignment =顶部字号=18前景=黑粗细=大胆/> 
< TextBlock中的Horizo​​ntalAlignment =左身高=17保证金=0TextWrapping =自动换行文本=简短说明输入1WIDTH =310VerticalAlignment =评出的前景=＃FF0097FF /> 
< / StackPanel的> 
< / StackPanel的> 
< /边框> 
  

这代码将在稍后一个列表框里面包裹与图片，输入1和简短说明的约束：

 < ListBox的X：名称=ListBox1的保证金= 0
 WIDTH =400HEIGHT =200的Horizo​​ntalAlignment =左
的ItemsSource ={结合}Grid.Row =1VerticalAlignment =评出的Grid.ColumnSpan =2 > 
< ListBox.ItemTemplate> 
<&DataTemplate的GT; 
 
 //上述
 
将代码; / DataTemplate中> 
< /ListBox.ItemTemplate> 
< /列表框> 
  

所以我的问题是：
我怎样才能让每一个好看的扩张/收缩项目在的ListBox ，每当我点击它？

非常感谢你在前进。

解决方案

真正的问题是在这里是你希望它倒闭的是什么？有太多的可能的方法来瓦解一些视觉上的数据项。你只是想更改项目的高度或你想要一些奇特的动画崩溃某些属性？

如果高度是你在找什么这是很简单。只需附上你那边境的点击事件。在阿里纳斯，你可能要编辑的 ItemContainerStyle 有< setter属性=Horizo​​ntalContentAlignmentVALUE =弹力/> 因此列表框会在屏幕上伸展，否则恕我直言，这是联合国可用。

---

 < ListBox.ItemTemplate> 
<&DataTemplate的GT; 
< BORDER = BorderBrush红了borderThickness =0,1点击=Border_Tap> 
<&StackPanel的GT; 
<！---模板---的制造>休息; 
< / StackPanel的> 
< /边框> 
< / DataTemplate中> 
< /ListBox.ItemTemplate> 
  

---

然后计算出你想要显示的最低高度（确保它实际上是可用的，这意味着...我可以再在其上点击可显示整个事情，而无需使用玻璃马格）。

 私人无效Border_Tap（对象发件人，System.Windows.Input.GestureEventArgs E）
 {
 INT了minHeight = 40; //改变任何你想要的
边境B =发件人为边界; 
如果（b.ActualHeight>了minHeight）
 {
 b.Height =了minHeight; 
} 
，否则
 {
 b.Height = double.NaN; //这将改变高度回汽车，显示出一切
} 
} 
  

< HR>

代码在行动

---

这仅仅是一个快速解决你的问题。有些人在这里宁愿有你的<$上的选状态height属性创建一个故事板动画C $ C> VisualStateManager 。如果你改写或创建一个新的问题明确说明你想要一个 VisualStateManager 解决方案，我会为您提供一个作为好。祝你好运。

I'm new in XAML for Windows Phone 8.1 and have some troubles with

1. making a Stackpanel clickable
2. collapse Item, when clicked

My work so far looks like that:

And the Code to that (please correct me, if there are major flaws):

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

This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:

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

So my question is: How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?

Thank you very much in advance.

解决方案

The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?

If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.

---

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

---

Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a 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
    }
}

---

Code In Action

---

This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.

这篇关于点击后C＃XAML列表框崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！