ピボット制御を使用した動的ページ
-
20-12-2019 - |
質問
Windows 7/8 Phone Development Arenaの新機能...私はWindows Phoneと著しく協力して楽しんでいます...しかし、学習曲線があり、それほど知るようになるために学習曲線がありました。
それで、私がやろうとしていることは、n個のピボットページを表示するデータ構造に動的にバインドされているページを作成することであり、各ピボットページはコンテンツを表示するための異なるxamlを持つでしょう。
このコードプロジェクトの記事を見て( http://www.codeproject.com/articles/113152/Apply-Data-Templates-Dynamically-By-TypeIn-WP7 )およびディスプレイを制御するためのリストボックスを使用します...私が興味があるのは、同じことをしていますが、ピボットページを使っています。
私は例を学びましょう...ここに、データをコントロールにバインドするためのクラスがあります。
public class ParkingLot : List<Car>
{
public ParkingLot() { }
// this will be the pivot page title
public string Lot { get; set; }
// the list of cars will be displayed on the page
}
public class Car
{
public Car() { }
// this will be the data that is displayed in the pivot page for each car
public string Width { get; set; }
public string Length { get; set; }
}
public class Library : List<Book>
{
public Library() { }
// this will be the pivot page title
public string Location { get; set; }
// the list of books will be displayed on the page
}
public class Book
{
public Book() { }
// this is the data that will be displayed for each book
public string ISBN { get; set; }
public string Title { get; set; }
}
.
ここですべてのコードを投稿することがより良いかどうかわからない...またはすべてのコードプロジェクトに関する記事を見てみるだけで、私は記事から修正されたコードを投稿します。 。誰かが私を助けることができることを期待して:
xaml:
<phone:PhoneApplicationPage x:Class="dynDataTemplateTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:loc="clr-namespace:dynDataTemplateTest.View"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"
Orientation="Portrait"
mc:Ignorable="d"
d:DesignWidth="480"
d:DesignHeight="768"
shell:SystemTray.IsVisible="True"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<!--LayoutRoot contains the root grid where all other page content is placed-->
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="24,24,0,12">
<TextBlock x:Name="ApplicationTitle"
Text="{Binding ApplicationTitle}"
Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="PageTitle"
Text="{Binding PageName}"
Margin="-3,-8,0,0"
Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentGrid"
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<loc:DynamicContentControl Content="{Binding SelectedItem}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" />
<controls:Pivot ItemsSource="{Binding Path=Items}" SelectedItem="{Binding Path=SelectedItem}" >
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DisplayName}" FontSize="30" FontWeight="Bold" Margin="5"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"></StackPanel>
</ItemsPanelTemplate>
</controls:Pivot.ItemsPanel>
</controls:Pivot>
</Grid>
</Grid>
.
これはDataTemplateseLectorクラス
です。public static class DataTemplateSelector
{
public static DataTemplate GetTemplate(ViewModelBase param)
{
Type t = param.GetType();
return App.Current.Resources[t.Name] as DataTemplate;
}
}
.
これは動的コンテンツ制御です。
パブリッククラスDynamicContentControl:ContentControl
{
保護されたオーバーライドvoid onContentChanged(Object OldContent、Object NewContent)
{
base.oncontentChanged(OldContent、NewContent);
これはmsator.model.DatatemplatesLector.getTemplate(ViewModelbaseとしてのNewContent);
}
これは最初のビューxamlです。
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<TextBlock Margin="20" Foreground="Green" FontSize="32"
FontWeight="Bold" Text="{Binding Path=FirstProperty}"
></TextBlock>
</Grid>
.
(2番目のビューXAMLは最初のビューにすることができ、色を変更するだけです)
これはFirstViewModelクラス(記事から)
です。 public class FirstViewModel : SelectableViewModel
{
public FirstViewModel()
{
DisplayName = "First";
FirstProperty = "this is the first property";
}
private string firstProp;
public string FirstProperty
{
get { return firstProp; }
set
{
if (firstProp != value)
{
firstProp = value;
RaisePropertyChanged("FirstProperty");
}
}
}
}
.
これはSelectableViewモデルクラス
です。 public class SelectableViewModel : ViewModelBase
{
public SelectableViewModel()
{
}
string dispName;
public string DisplayName
{
get { return dispName; }
set
{
if (dispName != value)
{
dispName = value;
RaisePropertyChanged("DisplayName");
}
}
}
}
.
メインビューモデルクラス:
public class MainViewModel : ViewModelBase
{
public string ApplicationTitle
{
get
{
return "Dynamic Data Templates";
}
}
public string PageName
{
get
{
return "Main page";
}
}
private List<SelectableViewModel> viewModels;
public MainViewModel()
{
viewModels = new List<SelectableViewModel>();
viewModels.Add(new FirstViewModel());
viewModels.Add(new SecondViewModel());
SelectedItem = viewModels[0];
}
public List<SelectableViewModel> Items
{
get
{
return viewModels;
}
}
SelectableViewModel selItem;
public SelectableViewModel SelectedItem
{
get { return selItem; }
set
{
if (selItem != value)
{
selItem = value;
RaisePropertyChanged("SelectedItem");
}
}
}
}
.
手助けをしてくれてありがとう!
解決
あなたがまだ学んでいると言うように、n個のピボットアイテムが悪い考えである理由を説明させてください:
-
単一のページのコンテンツの量のためにパフォーマンスの問題に遭遇するでしょう。リストを使用すると、アイテムを仮想化できます。ピボット制御は動的に追加されたピボットテムの仮想化をサポートしていません。
-
望んでいるものにすぐに到達する方法がないので、たくさんのピボットテムがあるとき、人々が望ましいアイテムに移動するのは難しいです。ピボットに30個のアイテムがありましたが、15回目に到達したいとしましょう。それはたくさんのスワイプを必要とし、それをすばやくするならば、それを望んでいたものを過ぎるのは簡単だろう。
-
。すなわち、電子メールアプリは各ピボットテム内のメールボックスの異なるビューを示し、「ALL」、「未読」、「フラグ付き」、「緊急」のためにフィルタリングされた。
-
関連データの異なる部分を表示する。すなわち、個々の連絡先/人を見るとき、異なるPivotItems:「プロファイル」、「新規」、「写真」、「履歴」。
ピボット対照は、2つの目的のいずれかに使用されることを意図しています:
-
一連のデータの異なるビューを表示するには、
テンプレートリストのn個のコレクションなど、膨大な量のコンテンツのコンテナとしてピボット制御を使用することは意図ではありません。
パフォーマンスと使いやすさに関する問題を回避するために、ピボット内の項目の最大数が7になることが示唆されています。
全体として、意図した方法のいずれかでピボットコントロールを使用していませんでした。 どちらも避けられるシナリオです。
申し訳ありませんが、これはあなたの質問に対する直接的な答えではありませんが、うまくいけばそれはあなたがより良いアプリ(またはアプリ)を開発するのを助けるでしょう。 ;)