、詳細ビューの画像は最初、それが現在の選択から&負荷の画像を更新し、その後、以前にロードされた画像&を示しています。
私の問題は、あなたのMater/Detail構造の実装方法です。あなたのコードから私はあなたがおそらくファイルから画像を読んでBitmapImageをImageの元にListViewに設定していることがわかります。ここではサンプルを作成しました。ウィンドウの幅が720を超えると、詳細がマスターの右側に表示されます幅が720より小さい場合は、詳細が拡大されます（フルスクリーン）。
私のメインページ：背後
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveStates">
<VisualState x:Name="DefaultState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MasterColumn.Width" Value="*" />
<Setter Target="DetailColumn.Width" Value="0" />
<Setter Target="MasterListView.SelectionMode" Value="None" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="MasterColumn" Width="320" />
<ColumnDefinition x:Name="DetailColumn" Width="*" />
</Grid.ColumnDefinitions>
<ListView x:Name="MasterListView" Grid.Column="0" ItemContainerTransitions="{x:Null}"
IsItemClickEnabled="True" ItemClick="MasterListView_ItemClick" ItemsSource="{x:Bind itemcollection}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:TestItem">
<Image Source="{x:Bind ImageItem}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentPresenter x:Name="DetailContentPresenter" Grid.Column="1" BorderThickness="1,0,0,0"
Padding="24,0" BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}"
Content="{x:Bind MasterListView.SelectedItem, Mode=OneWay}">
<ContentPresenter.ContentTemplate>
<DataTemplate x:DataType="local:TestItem">
<Image Source="{x:Bind ImageItem}" />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Grid>
コード：
private ObservableCollection<TestItem> itemcollection = new ObservableCollection<TestItem>();
public MainPage()
{
this.InitializeComponent();
}
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
StorageFolder picLib = KnownFolders.PicturesLibrary;
var picfiles = await picLib.GetFilesAsync();
foreach (var pic in picfiles)
{
BitmapImage bmp = new BitmapImage();
IRandomAccessStream stream = await pic.OpenReadAsync();
bmp.SetSource(stream);
itemcollection.Add(new TestItem { ImageItem = bmp });
}
}
private void MasterListView_ItemClick(object sender, ItemClickEventArgs e)
{
var clickedItem = (TestItem)e.ClickedItem;
if (AdaptiveStates.CurrentState == NarrowState)
{
Frame.Navigate(typeof(DetailPage), clickedItem);
}
}
マイ詳細ページ：背後
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image Source="{x:Bind image}" />
</Grid>
コード：
private BitmapImage image;
public DetailPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var testitem = e.Parameter as TestItem;
image = testitem.ImageItem;
var backStack = Frame.BackStack;
var backStackCount = backStack.Count;
if (backStackCount > 0)
{
var masterPageEntry = backStack[backStackCount - 1];
backStack.RemoveAt(backStackCount - 1);
// Doctor the navigation parameter for the master page so it
// will show the correct item in the side-by-side view.
var modifiedEntry = new PageStackEntry(
masterPageEntry.SourcePageType,
e.Parameter,
masterPageEntry.NavigationTransitionInfo
);
backStack.Add(modifiedEntry);
}
// Register for hardware and software back request from the system
SystemNavigationManager systemNavigationManager = SystemNavigationManager.GetForCurrentView();
systemNavigationManager.BackRequested += DetailPage_BackRequested;
systemNavigationManager.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
SystemNavigationManager systemNavigationManager = SystemNavigationManager.GetForCurrentView();
systemNavigationManager.BackRequested -= DetailPage_BackRequested;
systemNavigationManager.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
}
private void OnBackRequested()
{
Frame.GoBack();
}
private void DetailPage_BackRequested(object sender, BackRequestedEventArgs e)
{
e.Handled = true;
OnBackRequested();
}
そして、私のTestItemクラスはここに非常に簡単です：
public class TestItem
{
public BitmapImage ImageItem { get; set; }
}
あなたはまた、公式Master/detail sampleを参照することができます。私はこの公式サンプルに基づいてサンプルを書きましたが、ここでのポイントは以下の通りです：
サイドバイサイドマスター/詳細ページを作成しています。
マスターリストと詳細ビューの間をナビゲートします。
アプリのサイズ変更時にナビゲーションモデルを変更する。
私はすでに、まだ私は詳細ビューで画像をロードするまでの時間ユーザーがクリックするリストビュー項目から小さなタイムラグを参照してください、バックグラウンドスレッドでimage_fetchを実行しています。
ListViewItemをクリックするたびにイメージソースを取得したので、イメージソースを詳細フレームに設定できますか？ここでは、DataBindingを使用して、ListViewにデータを追加するときにすべての画像を取得することができます。
こんにちは@Grace風水 - MSFT、回答いただきありがとうございます。私は**/Assets/emptyImage.png **ファイルから空のイメージのみをロードしています。選択の実際のイメージは、カスタムapi ** image_fetch **を使用して取得されます。このAPIは、HTTP呼び出しを使用してサーバー上に配置されたイメージを取得します。 –
@Ganeshkudva、それは問題ありません。画像をどこでどのように取得しても問題ありません。画像ソースを 'ListView'のコレクションに追加した後に画像をロードするだけで済みます.1つの画像アイテムを詳細ビューに表示する必要がある場合は、再度それをフェッチする。私のサンプルをもう一度チェックしてください。 –