2

This one is driving me crazy and I am sure there must be a straightforward answer (that I haven't been able to spot).

I have a grouped gridview control which uses a VariableSizedWrapGrid for the grouped panel. The designs approved by my client include a top and bottom border on each group. I thought I could do one of two things:

  1. Specify the border on the VariableSizedWrapGrid; or
  2. Create a line in the GroupStyle.HeaderTemplate and apply the same to a footer.

So it seems I can't do either of those things as VariableSizedWrapGrid inherits from Panel which doesn't support the border property (only adding the border as a child element) and the GridView class doesn't include a grouped footer property. Is there a way of applying a border to the VariableSizedWrapGrid? Xaml is quite new to me as I normally specialise in server side code rather than presentation.

4

2 に答える 2

1

私があなたを正しく理解していれば、あなたが達成しようとしていることは次のようなものです:

以下のコードの結果

これはそのためのコードで、variablesizegrid でも動作するはずです。私が誤解している場合は、さらに詳しい情報と既にお持ちのコードを追加していただければ、どのように最善の支援ができるかを確認できます。

<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="App14.ItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App14"
xmlns:data="using:App14.Data"
xmlns:common="using:App14.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <CollectionViewSource x:Name="groups" IsSourceGrouped="true" />
</Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.Resources>
        <DataTemplate x:Key="groupTemplate">
            <Grid>
                <Border BorderBrush="White" BorderThickness="0,10" Padding="20">
                    <StackPanel >
                        <Border Background="DarkGreen" Padding="10" Margin="10">
                            <TextBlock Text="{Binding Name}"/>
                        </Border>
                        <Border Background="Yellow" Padding="10" Margin="10">
                            <Image Width="100" Height="100" Stretch="Uniform" Source="{Binding Image}"/>
                        </Border>
                    </StackPanel>
                </Border>
            </Grid>
        </DataTemplate>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        TabIndex="1"
        Grid.RowSpan="2"
        Padding="116,136,116,46"
        ItemsSource="{Binding Source={StaticResource groups}}"
        ItemTemplate="{StaticResource groupTemplate}">
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="10">
                            <TextBlock Text='{Binding Key}' Foreground="White" FontSize="25" Margin="5" />
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>
</Grid>

そしてコード:

namespace App14

{ public seal 部分クラス ItemsPage : App14.Common.LayoutAwarePage { public ItemsPage() { this.InitializeComponent();

        groups.Source = GetAllGrouped(LoadCats());
    }
    public IEnumerable<IGrouping<string, FakeCat>> GetAllGrouped(IEnumerable<FakeCat> cats)
    {
        return cats.OrderBy(x => x.Name).GroupBy(x => x.Name);
    }

    IEnumerable<FakeCat> LoadCats()
    {
        return new List<FakeCat>
                   {
                       new FakeCat {Name = "Naomi", Image = "../Assets/cat1.jpg"},
                       new FakeCat {Name = "Naomi", Image = "../Assets/cat2.jpg"},
                       new FakeCat {Name = "Peter", Image = "../Assets/cat3.jpg"},
                       new FakeCat {Name = "Spencer", Image = "../Assets/cat4.jpg"},
                   };
    }
}
public class FakeCat
{
    public string Name { get; set; }
    public string Image { get; set; }
    public int ItemSize { get; set; }
}

}

于 2013-02-03T18:39:44.423 に答える
0

問題が解決しました!実際のアイテムではなく、グループのテンプレートを制御するものを理解するのに苦労したと思います。これを解決したことを称賛したいのですが、LinkedInグループのメンバーのおかげで答えが返ってきました。次のスタイルは、GridViewのGroupStyleのContainerStyleに適用すると機能します。

<Style x:Key="GroupItemStyle1" TargetType="GroupItem">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="GroupItem">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
        <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
        <Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
        <ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once">
            <ItemsControl.ItemContainerTransitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition/>
                    <ContentThemeTransition/>
                    <ReorderThemeTransition/>
                    <EntranceThemeTransition IsStaggeringEnabled="False"/>
                </TransitionCollection>
            </ItemsControl.ItemContainerTransitions>
        </ItemsControl>
        <Rectangle Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
        </Grid>
        </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
</Style>

次に、GridViewのXAMLで:

<GridView.GroupStyle>
    <GroupStyle  HidesIfEmpty="True" ContainerStyle="{StaticResource GroupItemStyle1}">
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <!-- Header Template here  -->
            </DataTemplate>
        </GroupStyle.HeaderTemplate>

        <GroupStyle.Panel>

            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,0,0"/>
            </ItemsPanelTemplate>

        </GroupStyle.Panel>
    </GroupStyle>
</GridView.GroupStyle>
于 2013-02-13T12:14:25.343 に答える