none
能否把gridviewitem 设置成圆角矩形? RRS feed

  • 问题

  • 重新定义style?

    <Style x:Key="gridviewitemstyle" TargetType="GridViewItem">
                <Setter Property="Background" Value="Orange"/>
                <Setter Property="Padding" Value="5"/>

               ???

            </Style>

    <GridView ItemsSource="{Binding Path=DataItems}" ItemContainerStyleSelector="{StaticResource setyselector}">

    谢谢!


    • 已编辑 pjfitren 2012年7月19日 3:25
    2012年7月19日 3:22

答案

  • Hi

    如果你想让每个GridView中的元素设置成圆角矩形,你可以设置GridView里的ItemContainerStyle来达到。如果是想设置GridView元素整体的样式建议你直接替换GridView.Template来替换整个控件的样式。

    写了一个例子,不知道是不是你想要的效果:

     <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Grid Width="100">
                                        <Rectangle RadiusX="8" RadiusY="8" Stretch="Fill" Fill="Red" />
                                        <ContentPresenter Content="{Binding Content}" />
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GridView.ItemContainerStyle>

    GridView.ItemContainerStyle中实际上设置的是GridViewItem类的属性。

    • 已标记为答案 pjfitren 2012年7月19日 7:26
    2012年7月19日 6:13
    版主
  • Hi,

    我上一个的方案不是很好。你可以试试这个。

    1.通过Blend把GridViewItem的模板导出来。要注意的是要把GridViewItem的模板导出而不是GridView的模板,这个是具体操作的方法:

    http://social.msdn.microsoft.com/Forums/zh-CN/metroappzhcn/thread/67b1f1c1-ff3f-490d-9b53-f2118ae82090

    2.得到模板后找到这一部分:

                    <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">
                     <Grid>
                      <ContentPresenter x:Name="contentPresenter" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                      <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Text="Xg" Visibility="Collapsed"/>
                      <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
                      <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" StrokeThickness="{StaticResource GridViewItemSelectedBorderThemeThickness}"/>
                      <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/>
                     </Grid>
                    </Border>

    这一部分是内容的显示,Grid中ContentPresenter就是显示的内容,你可以在Grid当中插入一个<Rectangle RadiusX="8" RadiusY="8" Stretch="Fill" Fill="Red" />
    这样就可以保留原来的效果。

    导出的模板除了表现出的样式之外,还有VisualState。Metro中控制一些特殊状态是通过VisualState控制,比如按下鼠标经过焦点等等,如果你要实现这些状态下的效果可以直接修改VisualState中相对应的值即可。

    ItemControls表示一个可用于呈现项的集合的控件。其实用起来很简单,很多控件派生自ItemControls,你可以参考一下ItemControls的文档,以及官方提供的ListView和GridView的示例:

    ItemControls文档
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemscontrol.aspx

    下面是ListView和GridView的具体使用示例:
    http://code.msdn.microsoft.com/windowsapps/ListViewSimple-d5fc27dd
    http://code.msdn.microsoft.com/windowsapps/ListView-Interaction-ac044c3c

    Hope this helps

    • 已标记为答案 pjfitren 2012年7月20日 5:07
    2012年7月20日 2:56
    版主

全部回复

  • Hi

    如果你想让每个GridView中的元素设置成圆角矩形,你可以设置GridView里的ItemContainerStyle来达到。如果是想设置GridView元素整体的样式建议你直接替换GridView.Template来替换整个控件的样式。

    写了一个例子,不知道是不是你想要的效果:

     <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Grid Width="100">
                                        <Rectangle RadiusX="8" RadiusY="8" Stretch="Fill" Fill="Red" />
                                        <ContentPresenter Content="{Binding Content}" />
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GridView.ItemContainerStyle>

    GridView.ItemContainerStyle中实际上设置的是GridViewItem类的属性。

    • 已标记为答案 pjfitren 2012年7月19日 7:26
    2012年7月19日 6:13
    版主
  • xiexie!

    2012年7月19日 7:26
  • 看来微软的东西,最好还是用C# C++来开发,什么JavaScript都是浮云啊。
    2012年7月19日 15:08
  • 今天我用的时候发现一个问题:

    形状倒是圆角了,只是原来的gridview的选择、pointerover等状态都没有了,

    是现在的属性把原来的重载了吧,我又想有原来的一些效果,要编辑什么哦?

    有没有好的关于itemcontols的资料推荐一下,谢谢!

    2012年7月20日 2:02
  • Hi,

    我上一个的方案不是很好。你可以试试这个。

    1.通过Blend把GridViewItem的模板导出来。要注意的是要把GridViewItem的模板导出而不是GridView的模板,这个是具体操作的方法:

    http://social.msdn.microsoft.com/Forums/zh-CN/metroappzhcn/thread/67b1f1c1-ff3f-490d-9b53-f2118ae82090

    2.得到模板后找到这一部分:

                    <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">
                     <Grid>
                      <ContentPresenter x:Name="contentPresenter" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                      <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Text="Xg" Visibility="Collapsed"/>
                      <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
                      <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" StrokeThickness="{StaticResource GridViewItemSelectedBorderThemeThickness}"/>
                      <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/>
                     </Grid>
                    </Border>

    这一部分是内容的显示,Grid中ContentPresenter就是显示的内容,你可以在Grid当中插入一个<Rectangle RadiusX="8" RadiusY="8" Stretch="Fill" Fill="Red" />
    这样就可以保留原来的效果。

    导出的模板除了表现出的样式之外,还有VisualState。Metro中控制一些特殊状态是通过VisualState控制,比如按下鼠标经过焦点等等,如果你要实现这些状态下的效果可以直接修改VisualState中相对应的值即可。

    ItemControls表示一个可用于呈现项的集合的控件。其实用起来很简单,很多控件派生自ItemControls,你可以参考一下ItemControls的文档,以及官方提供的ListView和GridView的示例:

    ItemControls文档
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemscontrol.aspx

    下面是ListView和GridView的具体使用示例:
    http://code.msdn.microsoft.com/windowsapps/ListViewSimple-d5fc27dd
    http://code.msdn.microsoft.com/windowsapps/ListView-Interaction-ac044c3c

    Hope this helps

    • 已标记为答案 pjfitren 2012年7月20日 5:07
    2012年7月20日 2:56
    版主