Question

我想制作一个有人的详细信息的弹出窗口。每个细节将在弹出窗口中垂直堆叠。我有两个问题。

（1）我应该如何处理（图形化）不可用的细节？（2）如何使容器周围的所有细节动态，以便其高度由可用细节的数量决定。

我的第一个想法是以下内容;

<StackPanel Width="400"
                Height="500">
        <StackPanel x:Name="sp">
            <Grid x:Name="spTelephone" Height="50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="50" />
                </Grid.ColumnDefinitions>
                <Grid   Grid.Column="0">
                    <Ellipse Fill="Blue"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"/>
                </Grid>
                <Grid Grid.Column="1"
                      Margin="5,0,0,0">
                    <TextBlock Text="+Some Phone No."
                               VerticalAlignment="Center"
                               FontFamily="Verdana"/>
                </Grid>
                <Grid   Grid.Column="2">
                    <Ellipse Fill="Blue"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"/>
                </Grid>
                <Grid   Grid.Column="3">
                    <Ellipse Fill="Blue"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"/>
                </Grid>
            </Grid>
            <Grid x:Name="spMobile"  Height="50">
                <!-- Repeat of above -->
            </Grid>
            <Grid x:Name="spEmail" Height="50">
                <!-- Repeat of above -->
            </Grid>
        <!-- Further Grids -->
        </StackPanel>
    </StackPanel>

我的想法是，如果细节不可用，那么我会将GRID的Visibility属性设置为Visibility.Collapsed。

例如，请参阅我的图片，其中包含3个细节。 enter image description here

然后，如果手机不可用，它将会是这样的。 enter image description here

那我该怎么做呢？我可以想象使用ListView也可能因为这会消除崩溃视图的需要。我可以将每个细节添加到Item中。但是，我如何获得列表视图及其父级来调整其高度呢？

Answer 1

为item定义datatemplate并使用任何items控件来表示它们。简单的解决方案是这样的：

模板

<DataTemplate x:Key="MyItemTemplate">
<Grid x:Name="spTelephone" Height="50">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>
    <Grid   Grid.Column="0">
        <Ellipse Fill="Blue"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"/>
    </Grid>
    <Grid Grid.Column="1"
          Margin="5,0,0,0">
        <TextBlock Text="+Some Phone No."
                   VerticalAlignment="Center"
                   FontFamily="Verdana"/>
    </Grid>
    <Grid   Grid.Column="2">
        <Ellipse Fill="Blue"
     HorizontalAlignment="Stretch"
     VerticalAlignment="Stretch"/>
    </Grid>
    <Grid   Grid.Column="3">
        <Ellipse Fill="Blue"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"/>
    </Grid>
</Grid>
</DataTemplate>

控制

<Border BorderBrush="Black" BorderThickness="2" VerticalAlignment="Center" HorizontalAlignment="Center">
    <ItemsControl ItemsSource="{Binding ItemsCollection}" 
        ItemTemplate="{StaticResource MyItemTemplate}"/>
</Border>

当然你必须从dataContext填充集合，而 Text =“+ Some Phone No。”也使用当前集合项的数据绑定。（在模板中使用DataContext = {Binding}）

此处的边框只是为了显示ItemsControl大小根据collection-items计数而变化。 ItemsControl也可以替换为任何后代。

我应该为这个预期的视图使用什么样的动态容器和内部容器？

1 个答案: