XAML - コントロール
１．目的
XAML の主要なコントロールの説明です。
２．参考書
（１） 参考書を書く。
３．XAMLでのコントロール
主なコントロールには、Button, CheckBox,ComboBox, ListBox, RadioButton,
ScrollBar, Slider, TabControl, GripSplitterがあります。
３．１ Button
Button は、Windows.Formsのボタンと同様の機能ですが、WPFにより非常に表現力が上がっています。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<WrapPanel >
<Button Margin="10,10,10,10" Content="Button"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="80.127" Height="38"/>
<Button VerticalAlignment="Top" Height="83" Content="Button">
<Button.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFF53910" Offset="0"/>
<GradientStop Color="#FF2FF40A" Offset="0.438"/>
<GradientStop Color="#FFF9FB0A" Offset="0.214"/>
<GradientStop Color="#FFED0CFD" Offset="1"/>
<GradientStop Color="#FF12FDF1" Offset="0.614"/>
<GradientStop Color="#FF121BF9" Offset="0.8"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Margin="10,10,10,10" Width="80.127" Height="38"
Content="Button" RenderTransformOrigin="0.5,0.5"
HorizontalAlignment="Left" VerticalAlignment="Top">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="-26.632"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Button.RenderTransform>
</Button>
<Button Margin="10,10,10,10" Width="80.127" Content="Button"
RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left"
VerticalAlignment="Bottom" Height="38">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="-20" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Button.RenderTransform>
</Button>
<Button Margin="10,10,10,10" Content="Button" Width="146.127"
HorizontalAlignment="Left" VerticalAlignment="Bottom"
Height="72" FontSize="20" FontFamily="MS PMincho"/>
<Button Margin="10,10,10,10" Opacity="0.5" Content="Button"
Width="146.127" BorderThickness="10,1,10,1">
</Button>
</WrapPanel>
</Page>
３．２ CheckBox, RadioButton
チェックボックスの例
<CheckBox Content="CheckBox"/>
チェックされているかどうかは IsChecked="true"
<CheckBox Width="144" Height="25" Content="CheckBox"
IsChecked="true"/>
スタックパネルに入れておくと、レイアウトが楽。ただし、連動した動作はしない。
<StackPanel Width="144">
<CheckBox Content="チェックボックス1" Width="144" Height="25"/>
<CheckBox Content="チェックボックス2" Width="144" Height="25"/>
</StackPanel>
ラジオボタンの例
<RadioButton Content="RadioButton"/>
チェックされているかどうかは IsChecked="true"
<RadioButton Content="RadioButton"
IsChecked="true"/>
同じレベルにあるラジオボタンはデフォルトでトグル動作になる。
GroupNameを指定することにより、別のレベルのラジオボタンもグループとしてトグル動作する。以下の例では、ラジオボタン１，２，３がグループとして動作する。
<StackPanel Background="Cyan">
<Label Width="128.11" Height="28" Content="Stack Panel"/>
<RadioButton Content="ラジオボタン1" GroupName="G1"/>
<RadioButton Content="ラジオボタン２" GroupName="G1"/>
</StackPanel>
<RadioButton Content="スタックパネルの外にあるボタン３" GroupName="G1"
HorizontalAlignment="Right" Width="230"/>
３．３ ComboBox
IsEditable="True"で書き換えも可能になります。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel >
<Label Content="編集不可"/>
<ComboBox HorizontalAlignment="Left" Margin="10,10,10,10">
<ComboBoxItem IsSelected ="True">選択されたComboBoxItem</ComboBoxItem>
<ComboBoxItem>ComboBoxItem 1</ComboBoxItem>
<ComboBoxItem>ComboBoxItem 2</ComboBoxItem>
<ComboBoxItem>ComboBoxItem 3</ComboBoxItem>
</ComboBox>
<Label Content="IsEditable=true で編集可能"/>
<ComboBox IsEditable ="True" HorizontalAlignment="Left"
Margin="10,10,10,10">
<ComboBoxItem IsSelected ="True">編集可能</ComboBoxItem>
<ComboBoxItem>ComboBoxItem 1</ComboBoxItem>
<ComboBoxItem>ComboBoxItem 2</ComboBoxItem>
<ComboBoxItem>ComboBoxItem 3</ComboBoxItem>
</ComboBox>
</StackPanel >
</Page>
３．４ ListBox
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel >
<Label Content="ListBox "/>
<ListBox IsSynchronizedWithCurrentItem="True">
<ListBoxItem>ListBoxItem 1</ListBoxItem>
<ListBoxItem IsSelected ="True">ListBoxItem 2</ListBoxItem>
<ListBoxItem>ListBoxItem 3</ListBoxItem>
<ListBoxItem>ListBoxItem 4</ListBoxItem>
<ListBoxItem>ListBoxItem 5</ListBoxItem>
<ListBoxItem>ListBoxItem 6</ListBoxItem>
<ListBoxItem>ListBoxItem 7</ListBoxItem>
<ListBoxItem>ListBoxItem 8</ListBoxItem>
<ListBoxItem>ListBoxItem 9</ListBoxItem>
</ListBox>
</StackPanel >
</Page>
３．５ ScrollBar
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<ScrollBar Orientation="Vertical" Width="10" Height="100"
Minimum="1" Maximum="100" Value="30" Margin="10,10,10,10"/>
<ScrollBar HorizontalAlignment="Left" Orientation="Horizontal"
Width="100" Height="10" Minimum="1" Maximum="100" Value="30"
Margin="10,10,10,10"/>
</StackPanel>
</Page>
既定では、縦のスクロールバーです。また、値(Value) は0.0〜1.0です。
<ScrollBar Value="0.3" />
水平のスクロールバーは、Orientation="Horizontal"で指定します。
また、最小値、最大値を変更したい場合は、それぞれ Minimum="1" Maximum="100" のように指定します。
<ScrollBar Orientation="Horizontal"
Minimum="1" Maximum="100" Value="30" />
３．６ Slider
最小値１〜最大値１０で、水平が規定値です。
<Slider Value="3"/>
垂直にするには、Orientation="Vertical"とします。
<Slider Orientation="Vertical"/>
最小値、最大値は、Minimum="1" Maximum="100" のように指定します。
<Slider Value="30" Minimum="1"
Maximum="100"/>
目盛りを表示するには、TickPlacement プロパティを設定する必要があります。TickPlacement
は、"None", "BottomRight", "TopLeft, "Both"のいずれかです。
<Slider TickPlacement="None"
Value="3"/>
<Slider TickPlacement="BottomRight"
Value="3"/>
<Slider TickPlacement="TopLeft"
Value="3"/>
<Slider TickPlacement="Both"
Value="3"/>
AutoToolTipPrecisionで、自動的にToolTipで値が表示されるときの精度を指定できます。
<Label Content="Value=3 AutoToolTipPrecision=2"/>
<Slider Value="3"
IsSnapToTickEnabled="True" Maximum="9" TickPlacement="BottomRight"
AutoToolTipPlacement="BottomRight" TickFrequency="3"
AutoToolTipPrecision="2" IsDirectionReversed="False"
IsMoveToPointEnabled="False" />
任意のメモリを設定するには次のように指定します。
<Slider Value="2" Orientation="Horizontal"
IsSnapToTickEnabled="True" Maximum="3" TickPlacement="BottomRight"
AutoToolTipPlacement="BottomRight" AutoToolTipPrecision="2"
Ticks="0, 1.1, 2.5, 3" />
３．７ TabControl
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TabControl Width="300" Height="200"
IsSynchronizedWithCurrentItem="True">
<TabItem Header="TabItem1">
<Grid/>
</TabItem>
<TabItem Header="TabItem2">
<Grid/>
</TabItem>
<TabItem Header="TabItem3">
<Grid/>
</TabItem>
</TabControl>
</Page>
３．８ GridSplitter
GridSplitterは、Grid の寸法を変更せずに Gridコントロールの行間または列間の領域を調整することができます。
次の図の灰色のGridSplitterを動かすと、Gridの行・列の領域を調整することができます。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel LastChildFill="True" Width="500" Height="400">
<Grid x:Name="Grid" Background="#FF0EEFFB" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.238*"/>
<ColumnDefinition Width="0.392*"/>
<ColumnDefinition Width="0.198*"/>
<ColumnDefinition Width="0.172*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.231*"/>
<RowDefinition Height="0.233*"/>
<RowDefinition Height="0.4*"/>
</Grid.RowDefinitions>
<TextBox Grid.Column="0" Grid.Row="0" Text="Grid.Column="0"
Grid.Row="0"" TextWrapping="Wrap"/>
<TextBox Grid.Column="1" Grid.Row="1" Text="Grid.Column=1
Grid.Row=1" TextWrapping="Wrap"/>
<TextBox Grid.Column="0" Grid.Row="2" Text="Grid.Column=1
Grid.Row=2" TextWrapping="Wrap"/>
<TextBox Grid.Column="2" Grid.Row="2" Text="Grid.Column=2
Grid.Row=2" TextWrapping="Wrap"/>
<TextBox Grid.Column="2" Grid.Row="0" Text="Grid.Column=2
Grid.Row=0" TextWrapping="Wrap"/>
<GridSplitter Grid.Column="2" HorizontalAlignment="Stretch"
Margin="40,-50.441,43.552,84.559" Grid.Row="1" Grid.RowSpan="2"/>
<TextBox Grid.Column="3" Grid.Row="1" Text="Grid.Column=2
Grid.Row=0" TextWrapping="Wrap"/>
<GridSplitter Grid.Row="1" HorizontalAlignment="Stretch"
Margin="6,48,12,51" Grid.Column="1" />
</Grid>
</DockPanel>
</Page>
４． 文字列関連コントロール
|
文字列系のコントロールには、TextBox, RichTextBox, TextBlock,PasswordBox,
Label, FlowDocumentScrollViewerがあります。
４．１ TextBox
|
|
TextBoxはWindows.FormsのTextBoxとほぼ同様の機能を提供します。
<TextBox Text="これはTextBoxです。
改行もできます。" TextWrapping="Wrap"/>
４．２ TextBlock
TextBlockは特定の枠内に書く場合に便利です。
<TextBlock Width="100" Height="100" Text="これはTextBlockです。枠内に書く場合に便利です。"
TextWrapping="Wrap"/>
４．３ RichTextBox
RichTextBoxはWindows.FormsのRichTextBoxとほぼ同様の機能を提供します。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel >
<RichTextBox>
<FlowDocument>
<Paragraph><Run Language="ja-jp">これは、</Run>RichTextBox<Run
Language="ja-jp">です。</Run></Paragraph>
<Paragraph><Run Language="ja-jp">いろいろな書式を記入することができます。</Run></Paragraph>
<Paragraph><Run Language="ja-jp"/>例えば、<Bold>太字</Bold></Paragraph>
<Paragraph FontSize="24" FontFamily="Impact"><Italic>Italic</Italic></Paragraph>
<Paragraph FontStyle="Italic">日本語のイタリックは、バグっている？</Paragraph>
<Paragraph><Run Language="ja-jp"/><Underline>下線</Underline></Paragraph>
<Paragraph FontSize="24"><Run Language="ja-jp"/>大きなフォント</Paragraph>
<Paragraph FontSize="24" FontFamily="Impact"><Run Language="ja-jp"/>Impact
FontFamily</Paragraph>
<Paragraph><Run Language="ja-jp"/><Button>ボタン</Button>を埋め込んだり。</Paragraph>
<Paragraph Foreground="Red">Foreground</Paragraph>
<Paragraph Background="Yellow">Background</Paragraph>
<Paragraph TextAlignment="Left">TextAlignment Left</Paragraph>
<Paragraph TextAlignment="Center">TextAlignment
Center</Paragraph>
<Paragraph TextAlignment="Right">TextAlignment Right</Paragraph>
</FlowDocument>
</RichTextBox>
</StackPanel >
</Page>
４．４ PasswordBox
<PasswordBox Password="パスワードが入ります"/>
４．５ Label
LabelはWindows.FormsのLabelとほぼ同様の機能を提供します。
<Label Content="これは、Labelです。"/>
４．６ FlowDocumentScrollViewer
連続したスクロール モードでフロー コンテンツを表示します。
<FlowDocumentScrollViewer>
<FlowDocument>
<Paragraph>
<Run Language="ja-jp">これは、</Run>FlowDocumentScrollViewer
<Run Language="ja-jp" xml:space="preserve">
です。</Run>
</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
５． Margin と Padding
工事中。
６． まとめ
工事中。
|