2018年07月04日
《その423》FlipView を利用した画像表示
FlipViewコントロールを利用した画像表示
今回のアプリの開始画面です。
見たい画像にチェックを入れます（最初の画像が表示されます）。
右矢印をクリックして次の画像に移りました。
３枚目の画像です。
画像01 にもチェックを入れました。
アプリの動作は以上のような感じです。
FlipView は、次のような XAMLコードだけで、完全な動作をするものが生成されますから、手軽に利用することができます。
<FlipView x:Name="flipView" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="400" Height="266">
<Image x:Name="image1" Source="pic01.jpg" />
<Image x:Name="image2" Source="pic02.jpg" />
<Image x:Name="image3" Source="pic03.jpg" />
<Image x:Name="image4" Source="pic04.jpg" />
<Image x:Name="image5" Source="pic05.jpg" />
</FlipView>
今回のアプリでは、上記の FlipViewコントロールと CheckBoxコントロールを利用しました。
下記の C++/CXプログラム MainPage.xaml.cpp では、
CheckBox のチェックの変化をイベントとして捕捉し、画像の表示・非表示を切り替えています。
以下は、MainPage.xaml のコードです。
<Page
x:Class="App15.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App15"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<FlipView x:Name="flipView" HorizontalAlignment="Left" Margin="40,30,0,0"
VerticalAlignment="Top" Width="400" Height="266">
<Image x:Name="image1" Source="pic01.jpg" />
<Image x:Name="image2" Source="pic02.jpg" />
<Image x:Name="image3" Source="pic03.jpg" />
<Image x:Name="image4" Source="pic04.jpg" />
<Image x:Name="image5" Source="pic05.jpg" />
</FlipView>
<CheckBox x:Name="checkBox1" Content="画像01" HorizontalAlignment="Left"
Margin="40,320,0,0" VerticalAlignment="Top"
Checked="checkBox1_Checked" Unchecked="checkBox1_Unchecked"/>
<CheckBox x:Name="checkBox2" Content="画像02" HorizontalAlignment="Left"
Margin="40,380,0,0" VerticalAlignment="Top"
Checked="checkBox2_Checked" Unchecked="checkBox2_Unchecked"/>
<CheckBox x:Name="checkBox3" Content="画像03" HorizontalAlignment="Left"
Margin="40,440,0,0" VerticalAlignment="Top"
Checked="checkBox3_Checked" Unchecked="checkBox3_Unchecked"/>
<CheckBox x:Name="checkBox4" Content="画像04" HorizontalAlignment="Left"
Margin="40,500,0,0" VerticalAlignment="Top"
Checked="checkBox4_Checked" Unchecked="checkBox4_Unchecked"/>
<CheckBox x:Name="checkBox5" Content="画像05" HorizontalAlignment="Left"
Margin="40,560,0,0" VerticalAlignment="Top"
Checked="checkBox5_Checked" Unchecked="checkBox5_Unchecked"/>
<Image x:Name="s_1" HorizontalAlignment="Left" Height="53"
Margin="131,310,0,0" VerticalAlignment="Top" Width="80"
Source="pic01.jpg" Stretch="Fill"/>
<Image x:Name="s_2" HorizontalAlignment="Left" Height="53"
Margin="131,370,0,0" VerticalAlignment="Top" Width="80"
Source="pic02.jpg" Stretch="Fill"/>
<Image x:Name="s_3" HorizontalAlignment="Left" Height="53"
Margin="131,430,0,0" VerticalAlignment="Top" Width="80"
Source="pic03.jpg" Stretch="Fill"/>
<Image x:Name="s_4" HorizontalAlignment="Left" Height="53"
Margin="131,490,0,0" VerticalAlignment="Top" Width="80"
Source="pic04.jpg" Stretch="Fill"/>
<Image x:Name="s_5" HorizontalAlignment="Left" Height="53"
Margin="131,550,0,0" VerticalAlignment="Top" Width="80"
Source="pic05.jpg" Stretch="Fill"/>
</Grid>
</Page>
以下は、MainPage.xaml.cpp のコードです。
//
// MainPage.xaml.cpp
// MainPage クラスの実装。
//
#include "pch.h"
#include "MainPage.xaml.h"
using namespace App15;
using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;
MainPage::MainPage()
{
InitializeComponent();
flipView->Items->Clear();
}
// f1 〜 f5 : 0 は画像を非表示, 1 は表示
int f1 = 0; // image1
int f2 = 0; // image2
int f3 = 0; // image3
int f4 = 0; // image4
int f5 = 0; // image5
// CheckBox でチェックされた画像を FlipView に登録します。
void MainPage::func1() {
// 最初に、FlipView に登録されている画像をクリアします。
flipView->Items->Clear();
// f1 == 1 ならば、pic01.jpg を FlipView に登録します。
if (f1) {
auto img = ref new Image();
img->Source = ref new Imaging::
BitmapImage(ref new Uri("ms-appx:///pic01.jpg"));
flipView->Items->Append(img);
}
if (f2) {
auto img = ref new Image();
img->Source = ref new Imaging::
BitmapImage(ref new Uri("ms-appx:///pic02.jpg"));
flipView->Items->Append(img);
}
if (f3) {
auto img = ref new Image();
img->Source = ref new Imaging::
BitmapImage(ref new Uri("ms-appx:///pic03.jpg"));
flipView->Items->Append(img);
}
if (f4) {
auto img = ref new Image();
img->Source = ref new Imaging::
BitmapImage(ref new Uri("ms-appx:///pic04.jpg"));
flipView->Items->Append(img);
}
if (f5) {
auto img = ref new Image();
img->Source = ref new Imaging::
BitmapImage(ref new Uri("ms-appx:///pic05.jpg"));
flipView->Items->Append(img);
}
// 上記の「 ms-appx:/// 」はプロジェクト内のパスを表します。
}
// FlipView に何も登録されていない初期状態に戻します。
void MainPage::func2() {
// f1 〜 f5 を全て 0 にします。
f1 = f2 = f3 = f4 = f5 = 0;
// CheckBox のチェックを、すべて外します。
checkBox1->IsChecked = false;
checkBox2->IsChecked = false;
checkBox3->IsChecked = false;
checkBox4->IsChecked = false;
checkBox5->IsChecked = false;
// FlipView に登録されている画像をクリアします。
flipView->Items->Clear();
}
void App15::MainPage::checkBox1_Checked(Platform::
Object^ sender,RoutedEventArgs^ e)
{
f1 = 1;
func1();
}
void App15::MainPage::checkBox1_Unchecked(Platform
::Object^ sender,RoutedEventArgs^ e)
{
func2();
}
void App15::MainPage::checkBox2_Checked(Platform
::Object^ sender,RoutedEventArgs^ e)
{
f2 = 1;
func1();
}
void App15::MainPage::checkBox2_Unchecked(Platform
::Object^ sender,RoutedEventArgs^ e)
{
func2();
}
void App15::MainPage::checkBox3_Checked(Platform
::Object^ sender,RoutedEventArgs^ e)
{
f3 = 1;
func1();
}
void App15::MainPage::checkBox3_Unchecked(Platform::
Object^ sender,RoutedEventArgs^ e)
{
func2();
}
void App15::MainPage::checkBox4_Checked(Platform::
Object^ sender,RoutedEventArgs^ e)
{
f4 = 1;
func1();
}
void App15::MainPage::checkBox4_Unchecked(Platform::
Object^ sender,RoutedEventArgs^ e)
{
func2();
}
void App15::MainPage::checkBox5_Checked(Platform::
Object^ sender,RoutedEventArgs^ e)
{
f5 = 1;
func1();
}
void App15::MainPage::checkBox5_Unchecked(Platform::
Object^ sender,RoutedEventArgs^ e)
{
func2();
}
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/7855986
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック
