UWP XAML-Gridview以不同方式显示第一个项目

时间:2017-08-30 21:48:25

标签: uwp uwp-xaml

我在Windows 10中有一个UWP应用程序。我在框架内有一个页面调用gridview:

<GridView ItemsSource="{x:Bind PassedMiniList}"
          IsItemClickEnabled="True">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="data:Miniature">
            <local:MiniListControl HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch">

            </local:MiniListControl>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

每个项目都基于以下UserControl,抱歉长度:

 <UserControl.Resources>
    <Style TargetType="TextBlock"
           x:Key="TextBoxData">
        <Setter Property="HorizontalAlignment"
                Value="Right" />
        <Setter Property="Padding"
                Value="10,0,0,0" />
        <Setter Property="TextWrapping"
                Value="Wrap" />

    </Style>
    <Style TargetType="Image"
           x:Key="MiniImage">
        <Setter Property="MaxWidth"
                Value="200" />
    </Style>
    <Style TargetType="StackPanel"
           x:Key="MiniOuterStackPanel">
        <Setter Property="BorderBrush"
                Value="Black" />
        <Setter Property="BorderThickness"
                Value="3" />
        <Setter Property="Margin"
                Value="5,5,5,5" />
        <Setter Property="Padding"
                Value="5,5,5,5" />

    </Style>       

</UserControl.Resources>
<StackPanel Orientation="Vertical"
            Name="OuterStackPanel"                
            Style="{StaticResource MiniOuterStackPanel}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="NarrowLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MiniImage.Width"
                            Value="100" />
                    <Setter Target="MiniImage.Height"
                            Value="100" />                       
                    <!--Works in theory, but because of width of set name, doesnt change overall size of SP-->
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MiniImage.Width"
                            Value="200" />
                    <Setter Target="MiniImage.Height"
                            Value="200" />

                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Image Name="MiniImage"
           Source="{x:Bind Miniature.Image}"/>
    <Grid MinHeight="150" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />                
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Text="Name:" />
        <TextBlock Grid.Column="1"
                   Text="{x:Bind Miniature.Name}"
                   Style="{StaticResource TextBoxData}" />
        <TextBlock Text="Quantity:" 
                   Grid.Row="1"/>
        <TextBlock Grid.Column="1"
                   Grid.Row="1"
                   Text="{x:Bind Miniature.Quantity}"
                   Style="{StaticResource TextBoxData}" />
        <TextBlock Text="Manufacturer:"
                   Grid.Row="2"/>
        <TextBlock Grid.Column="1"
                   Grid.Row="2"
                   Text="{x:Bind Miniature.Manufacturer}"
                   Style="{StaticResource TextBoxData}" />
        <TextBlock Text="Set:"
                   Grid.Row="3"/>
        <TextBlock Grid.Column="1"
                   Grid.Row="3"
                   Text="{x:Bind Miniature.Set}"
                   Style="{StaticResource TextBoxData}" />
        <TextBlock Text="Location:"
                   Grid.Row="4" />
        <TextBlock Grid.Column="1"
                   Grid.Row="4"
                   Text="{x:Bind Miniature.Location}"
                   Style="{StaticResource TextBoxData}" />
    </Grid>  
</StackPanel>

最终我会向visualstatemanager添加更多内容来调整外观但是现在我遇到的问题可以在以下链接中看到:https://ibb.co/iUcS45

基本上,第一个项目的处理方式与其余项目不同,或者某些网格使用第一个项目作为某种最大宽度确定器,其他所有内容都被压缩。您可以看到所选项目显示对象的实际边界可能实际上与第一个项目相同但被压缩。现在,由于各种原因,我不想强​​制项目达到特定的大小。正如您所看到的,视觉状态管理器正在根据总宽度调整图像大小,我希望项目的其余部分分配给最小的空间量。这就是我认为第一个项目之后的项目,这就是我想要的样子。 我确实找到了这个post,但它并没有完全帮助,因为它将gridview的功能改变到了哪里,而不是改变周围的项目,你必须使用scrollviewer,当然这会强制特定的宽度。

有什么我想念的吗?我是UWP的新手,但不记得在教程等中听到过这个。

编辑 - 可能值得注意的是我有一个版本,如果这个工作我使用了一系列堆栈面板而不是我放在图像下方的网格,这似乎工作正常,除了它看起来像垃圾因为我无法得到它是正确的。这可能是一个更好的选择,但也可能是一个独立的SO问题......

0 个答案:

没有答案