7

アイテムテンプレートとヘッダーテンプレートを使用してグループ化されたGridViewを作成しました。それはうまく機能しますが、それから私のリストの最初の記事に別のテンプレートを持たせたいです（より大きくするために）。たとえば、フランスのアプリケーション「LeMonde」のように。それを実現するためにテンプレートをどのように定義できるかわかりません。

これが私の現在のxamlコードです

<Page.Resources>
 <CollectionViewSource x:Name="cvs1" IsSourceGrouped="True" />
</Page.Resources>

<Grid Background="White">

    <GridView  x:Name="PicturesGridView" SelectionMode="None"
ItemsSource="{Binding Source={StaticResource cvs1}}"IsItemClickEnabled="True"  ItemClick="ItemView_ItemClick">
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel x:Name="RectanglesStackPanel" Margin="8" Orientation="Vertical" Width="242">

                    <Image Source="{Binding imageUrl}" Height="180"  Width="225"   Stretch="UniformToFill" />

                    <Border Background="Gray" Opacity="1" Width="225" Height="115">
                       <TextBlock Text="{Binding title}"
           Foreground="White" TextWrapping="Wrap" Width="215" FontSize="18" />
                    </Border>
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                         <Button  Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>     
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>


</Grid>

私はこのようにC＃でアイテムのリストをバインドするだけです：

this.cvs1.Source = ListOfArticle;

前もって感謝します ：）

Ivanありがとう。それは私を大いに助けます。ただし、例で提供されているコードは、Windows 8では最新ではないようです。ページのリソースで定義されているテンプレートにアクセスする方法について、何かアイデアはありますか。FindRessourcesメソッドはもう存在しません。代わりにこのコードを試してみましたが、成功しませんでした：

 public class AuctionItemDataTemplateSelector : DataTemplateSelector
 {
    protected override DataTemplate SelectTemplateCore(object item, 
                                                  DependencyObject container)
    {
        FrameworkElement element = container as FrameworkElement;

        if (element != null && item != null && item is Article)
        {
            Article auctionItem = item as Article;

            DataTemplate mySmallTemplate = element.FindName("SmallTemplate") as DataTemplate;

            switch (auctionItem.isFirstItem)
            {
                case true:
                    return
                  element.FindName("BigTemplate") as DataTemplate;

                case false:
                    return
                   element.FindName("SmallTemplate") as DataTemplate;
            }
        }

        return null;
    }
}

'

4

3 に答える 3

12

必要なすべてのテンプレートをプロパティとして使用してカスタム DataTemplateSelector を作成する方法に従いました。

namespace Helper
{
    public class CustomSampleDataTemplateSelector : DataTemplateSelector
    {
        public DataTemplate FirstDataTemplate { get; set; }

        public DataTemplate SecondDataTemplate { get; set; }

        protected override DataTemplate SelectTemplateCore(object item, 
                  DependencyObject container)
        {
            if (item is FirstItemType)
                return FirstDataTemplate ;
            if (item is SecondItemType)
                return SecondDataTemplate;
            else
                return FirstDataTemplate ;
        }
    }
}

これで、次のように XAML で直接使用できます。

リソースを宣言します。

<UserControl.Resources>
    <DataTemplate x:Key="myTemplate1">
        <Border Background="White">
            <TextBlock Text="{Binding Name}"
                       FontSize="40"
                       Foreground="Black"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
        </Border>
    </DataTemplate>
    <DataTemplate x:Key="myTemplate2">
        <Border Background="Orange">
            <Grid>
                <Image Source="{Binding Image}"></Image>
                <TextBlock Text="{Binding ShopName}"
                           FontSize="64"
                           Foreground="LightBlue"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center" />
            </Grid>
        </Border>
    </DataTemplate>
    <Common:CustomSampleDataTemplateSelector x:Key="mySelector"
                                     FirstDataTemplate="{StaticResource myTemplate1}"
                                     SecondDataTemplate="{StaticResource myTemplate2}">
    </Common:CustomSampleDataTemplateSelector >
</UserControl.Resources>

これを使って

<GridView  x:Name="PicturesGridView" ItemTemplateSelector="{StaticResource mySelector}">

それで全部です

于 2012-08-06T16:04:40.753 に答える
4

ありがとうございました。最初のアイテムが他のアイテムとは異なるテンプレートを持つため、実際にはうまく機能します。しかし、それは私が望んでいたことではありませんでした。それは私がはっきりしなかった私のせいです。あなたのテクニックでは、グリッドビューのアイテムサイズは常に同じサイズであるためです。たとえば、myTemplate1を選択して幅400のグリッドを作成し、myTemplate2を選択して幅200のグリッドを作成します。次に、最初の要素がmyTemplate1の後に続く場合、グリッドビューのすべての要素のサイズは、内部の画像であっても400になります。たった200です。

この記事のような結果を達成したかった：http：//blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx

だから私は実際に必要なものを見つけましたそれはVariableSizedWrapGridであり、gridViewのバージョンを再実装します。私はこの非常に良い記事に従いました：http ：//social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/966aa897-1413 -46f0-bef7-663de36f9423。

ただし、最初の質問に答えるため、あなたの答えを正解としてマークします。グループグリッドビューでさまざまなアイテムサイズを選択できます。

お時間をいただき、誠にありがとうございました。

于 2012-08-07T09:48:09.500 に答える
0

GridView 内のすべてのアイテムに対して単一の ItemTemplate を使用する代わりに、最初の要素に対して異なる ItemTemplate を定義し、次に他のすべての要素に対して異なる ItemTemplate を定義する必要があります。

そのためには、ItemTemplate をリモートで定義し、ItemTemplateSelector を使用して使用するスタイルを決定する必要があります。

詳細については、http : //msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspxをご覧ください。

于 2012-08-05T20:35:21.877 に答える