none
XamlのImageに画像を設定した際の表示されるタイミングについて RRS feed

  • 質問

  • こんにちは。

    環境:Microsft Visual Studio Express 2013 for Windows (C++/CX + XAML で作成しています)

    現在行っている処理ですが、

    1つの Xaml に StackPanel を2つ用意して

    Windows::UI::Xaml::Visibility をひとつだけ Visible に設定することで画面切り替えのような処理を行う画面を作成しました。

    そのXAMLで、現在「表示していない」 StackPanel 内の Image に

    Image->Source = ref new Windows::UI::Xaml::Media::Imaging::BitmapImage(ref new Uri(dynamic_cast<String^>(画像のパス)));

    のような形で画像を設定した後、

    現在「表示している」 StackPanel を Collapsed を設定して「表示していない」 StackPanel に Visible を設定した場合に

    画像は表示されたのですが、切り替えの瞬間に一瞬ですが画像が表示される前の白い背景画面が表示されました。

    処理としては Image->Source を設定後に が StackPanel の切り替えを行っていたのですが、デバッグで調べると、

    Image->Source に画像を設定した時点では、まだ画面に画像が表示されていない事が分かりました。

    私がやりたい操作としては、画像が別画面で確実に表示された後、別画面を表示したいです。

    そこで質問なのですが、 Image->Source に設定した画像はどのタイミングで表示されるのでしょうか?

    何かご存知の方がいらっしゃれば教えて頂ければと思います。

    よろしくお願いします。

    2016年3月3日 6:51

回答

  • Windows::UI::Xaml::Controls::Image::ImageOpendイベントで切り替えては?
    非同期で画像がダウンロード/デコード読み込まれる場合でも、その間も画面は描画しないといけないわけで、確実に画像が描画されるとわかるのはImageOpenedイベントしかないと思います。

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
            <BitmapImage UriSource="./Assets/01.png" x:Key="img1"/>
            <BitmapImage UriSource="./Assets/02.png" x:Key="img2"/>
        </Page.Resources>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <StackPanel x:Name="stack1" Visibility="Collapsed" Grid.Column="0">
                        <Image x:Name="img1" ImageOpened="img1_ImageOpened" />
                    </StackPanel>
                    <StackPanel x:Name="stack2" Visibility="Collapsed" Grid.Column="1">
                        <Image x:Name="img2" ImageOpened="img2_ImageOpened" />
                    </StackPanel>
                </Grid>
                <Button Grid.Row="1" Content="Test" Click="Button_Click" HorizontalAlignment="Stretch" FontSize="30"
                        Background="Gray" />
            </Grid>
    
        </Grid>
    </Page>
    void App1::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	if (stack1->Visibility == Windows::UI::Xaml::Visibility::Collapsed)
    	{
    		stack1->Visibility = Windows::UI::Xaml::Visibility::Visible;
    		img1->Source = static_cast<BitmapImage^>(this->Resources->Lookup("img1"));
    	}
    	else
    	{
    		stack2->Visibility = Windows::UI::Xaml::Visibility::Visible;
    		img2->Source = static_cast<BitmapImage^>(this->Resources->Lookup("img2"));
    	}
    }
    void App1::MainPage::img1_ImageOpened(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	//__debugbreak();
    	stack2->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
    }
    void App1::MainPage::img2_ImageOpened(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	//__debugbreak();
    	stack1->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
    }


    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク I19 2016年3月4日 2:42
    2016年3月3日 10:06

すべての返信

  • Windows::UI::Xaml::Controls::Image::ImageOpendイベントで切り替えては?
    非同期で画像がダウンロード/デコード読み込まれる場合でも、その間も画面は描画しないといけないわけで、確実に画像が描画されるとわかるのはImageOpenedイベントしかないと思います。

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
            <BitmapImage UriSource="./Assets/01.png" x:Key="img1"/>
            <BitmapImage UriSource="./Assets/02.png" x:Key="img2"/>
        </Page.Resources>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <StackPanel x:Name="stack1" Visibility="Collapsed" Grid.Column="0">
                        <Image x:Name="img1" ImageOpened="img1_ImageOpened" />
                    </StackPanel>
                    <StackPanel x:Name="stack2" Visibility="Collapsed" Grid.Column="1">
                        <Image x:Name="img2" ImageOpened="img2_ImageOpened" />
                    </StackPanel>
                </Grid>
                <Button Grid.Row="1" Content="Test" Click="Button_Click" HorizontalAlignment="Stretch" FontSize="30"
                        Background="Gray" />
            </Grid>
    
        </Grid>
    </Page>
    void App1::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	if (stack1->Visibility == Windows::UI::Xaml::Visibility::Collapsed)
    	{
    		stack1->Visibility = Windows::UI::Xaml::Visibility::Visible;
    		img1->Source = static_cast<BitmapImage^>(this->Resources->Lookup("img1"));
    	}
    	else
    	{
    		stack2->Visibility = Windows::UI::Xaml::Visibility::Visible;
    		img2->Source = static_cast<BitmapImage^>(this->Resources->Lookup("img2"));
    	}
    }
    void App1::MainPage::img1_ImageOpened(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	//__debugbreak();
    	stack2->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
    }
    void App1::MainPage::img2_ImageOpened(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	//__debugbreak();
    	stack1->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
    }


    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク I19 2016年3月4日 2:42
    2016年3月3日 10:06
  • gekkaさん、サンプル有りのとても分かりやすいご説明ありがとうございます。

    おかげで問題が解決いたしました。

    2016年3月4日 2:43