宇宙仮面の
C# Programming

 
 

WPFXAML -  コントロール

1.目的

XAML の主要なコントロールの説明です。

2.参考書

(1) 参考書を書く。

3.XAMLでのコントロール

主なコントロールには、Button, CheckBox,ComboBox, ListBox, RadioButton, ScrollBar, Slider, TabControl, GripSplitterがあります。

3.1 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>

3.2 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を指定することにより、別のレベルのラジオボタンもグループとしてトグル動作する。以下の例では、ラジオボタン1,2,3がグループとして動作する。

<StackPanel Background="Cyan">
  <Label Width="128.11" Height="28" Content="Stack Panel"/>
  <RadioButton Content="ラジオボタン1" GroupName="G1"/>
  <RadioButton Content="ラジオボタン2" GroupName="G1"/>
</StackPanel>

<RadioButton Content="スタックパネルの外にあるボタン3" GroupName="G1" HorizontalAlignment="Right" Width="230"/>

3.3 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>

 

3.4 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>

3.5 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" />

3.6 Slider

 

 

最小値1〜最大値10で、水平が規定値です。

<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" />

3.7 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>

 

3.8 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=&quot;0&quot; Grid.Row=&quot;0&quot;" 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>

4. 文字列関連コントロール

文字列系のコントロールには、TextBox, RichTextBox, TextBlock,PasswordBox, Label, FlowDocumentScrollViewerがあります。

4.1 TextBox

TextBoxはWindows.FormsのTextBoxとほぼ同様の機能を提供します。

 

<TextBox Text="これはTextBoxです。&#xd;&#xa;改行もできます。" TextWrapping="Wrap"/>

4.2 TextBlock

TextBlockは特定の枠内に書く場合に便利です。

 

<TextBlock Width="100" Height="100" Text="これはTextBlockです。枠内に書く場合に便利です。" TextWrapping="Wrap"/>

4.3 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>

4.4 PasswordBox

 

 

<PasswordBox Password="パスワードが入ります"/>

4.5 Label

LabelはWindows.FormsのLabelとほぼ同様の機能を提供します。

 

<Label Content="これは、Labelです。"/>

4.6 FlowDocumentScrollViewer

連続したスクロール モードでフロー コンテンツを表示します。

<FlowDocumentScrollViewer>
  <FlowDocument>
    <Paragraph>
      <Run Language="ja-jp">これは、</Run>FlowDocumentScrollViewer
      <Run Language="ja-jp" xml:space="preserve"> です。</Run>
    </Paragraph>
  </FlowDocument>
</FlowDocumentScrollViewer>

5. Margin と Padding

工事中。

6. まとめ

工事中。