ListView弄乱了DataTemplates的UI

时间:2015-10-25 23:19:46

标签: c# xaml windows-10 win-universal-app uwp

我正在将我的WP8.1应用程序移植到UWP,我发现新的通用ListView喜欢通过添加一些额外的元素和逻辑(如鼠标覆盖项目时的一些背景颜色)来混淆DataTemplaes的UI

假设我有一个非常简单的模板:

<DataTemplate x:Key="IconsTemplate">
    <Grid Width="40"
          Height="40">
        <Image Source="{Binding IconImage}"/>
    </Grid>
</DataTemplate>

这个ListView:

<ListView ItemTemplate="{StaticResource IconsTemplate}"
          ItemsSource="{x:Bind ViewModel.Source, Mode=OneWay}"
          CanReorderItems="False">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

我希望得到,就像在WP8.1上一样,一个简单的包裹网格,我的40 * 40项目里面有一个图像。相反,我得到了这个:

ListView result

每个项目都是矩形而不是方形(我的意思是,那些明显我的40 * 40模板),而且我的模板的背景颜色也有自动逻辑。

我不想要任何,我希望我的模板显示完全,我希望能够手动设置我的逻辑指针事件。

我尝试查看默认的ListView模板但是我没有找到任何有用的东西,是否有一个我缺少的参数或者是否有办法让ListView显示像以前那样的普通项目WP8.1?

1 个答案:

答案 0 :(得分:1)

我设法通过使用ListViewItems的自定义样式来解决问题。 这是我使用的风格:

<Style TargetType="ListViewItem" x:Key="CustomListViewItemExpanded">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="Transparent" />
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="MinWidth" Value="0"/>
    <Setter Property="MinHeight" Value="0"/>
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <Grid x:Name="ContentBorder"
                        BorderThickness="0">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <PointerDownThemeAnimation TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOverSelected">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PressedSelected">
                                <Storyboard>
                                    <PointerDownThemeAnimation TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DisabledStates">
                            <VisualState x:Name="Enabled"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="MultiSelectStates">
                            <VisualState x:Name="MultiSelectDisabled"/>
                            <VisualState x:Name="MultiSelectEnabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DataVirtualizationStates">
                            <VisualState x:Name="DataAvailable"/>
                            <VisualState x:Name="DataPlaceholder"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ReorderHintStates">
                            <VisualState x:Name="NoReorderHint"/>
                            <VisualState x:Name="BottomReorderHint"/>
                            <VisualState x:Name="TopReorderHint"/>
                            <VisualState x:Name="RightReorderHint"/>
                            <VisualState x:Name="LeftReorderHint"/>
                            <VisualStateGroup.Transitions>
                                <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
                            </VisualStateGroup.Transitions>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DragStates">
                            <VisualState x:Name="NotDragging" />
                            <VisualState x:Name="Dragging"/>
                            <VisualState x:Name="DraggingTarget"/>
                            <VisualState x:Name="MultipleDraggingPrimary"/>
                            <VisualState x:Name="MultipleDraggingSecondary"/>
                            <VisualState x:Name="DraggedPlaceholder"/>
                                <VisualStateGroup.Transitions>
                                <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
                            </VisualStateGroup.Transitions>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter"
                                        ContentTransitions="{TemplateBinding ContentTransitions}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        Content="{TemplateBinding Content}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Margin="{TemplateBinding Padding}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这将禁用所有 VisualStates,它将删除模板中存在的所有不必要的控件,并允许以原始大小呈现每个项目。