C1RadialColorItem を使用して、C1RadialMenu コントロールを使用するカラーピッカーを作成することができます。このトピックでは、C1RadialMenu アプリケーションを作成し、いくつかの C1RadialColorItem を C1RadialMenu コントロールに追加します。XAML マークアップとコードの両方を使用してアプリケーションを作成します。
XAML ビュー
- ページ内の
<Grid> </Grid>タグを見つけ、このタグを次のマークアップに置き換えて、アプリケーションのフレームワークを作成します。マークアップ コードのコピー<Grid Background="{ThemeResourceApplicationPageBackgroundThemeBrush}">
<Border Background="LemonChiffon" MinHeight="40"BorderBrush="#969696"
BorderThickness="1"Padding="5" HorizontalAlignment="Stretch"VerticalAlignment="Stretch">
<Xaml:C1ContextMenuService.ContextMenu>
</Xaml:C1ContextMenuService.ContextMenu>
<Xaml:C1ListViewer x:Name="text"Foreground="Sienna" HorizontalAlignment="Stretch"VerticalAlignment="Center" Height="75"ZoomMode="Disabled" Xaml:C1NagScreen.Nag="True">
<TextBlock Text="Touch:hold down for a few seconds until the indicator displays. Keyboard:press the context-menu button over this text. Mouse: right-click overthis text."
FontSize="16" TextWrapping="Wrap" />
</Xaml:C1ListViewer>
</Border>
<TextBlock x:Name="txt" Foreground="Red"Text="" FontSize="16" VerticalAlignment="Bottom"HorizontalAlignment="Center" Margin="10" />
</Grid> - 追加したマークアップ内にある
<Xaml:C1ContextMenuService.ContextMenu></Xaml:C1ContextMenuService.ContextMenu>タグを探します。このタグの間にカーソルを置きます。 - Visual Studio ツールボックスの C1RadialMenu コントロールを見つけてダブルクリックし、このコントロールをアプリケーションに追加します。
- 次のように、開始タグ
<C1RadialMenu>を編集します。マークアップ コードのコピー<Xaml:C1RadialMenux:Name="contextMenu" Offset="-130,0"ItemClick="contextMenu_ItemClick" > - 次のマークアップを
<C1RadialMenu></C1RadialMenu>タグの間に追加して、３つの C1RadialColorItem をアプリケーションに追加します。マークアップ コードのコピー<Xaml:C1RadialColorItemx:Name="rainbowItem" ShowSelectedItem="True" AutoSelect="True"IsSelectable="False" >
</Xaml:C1RadialColorItem>
<Xaml:C1RadialColorItemx:Name="greenItem" SelectedIndex="5"ShowSelectedItem="True" AutoSelect="True"IsSelectable="False" >
</Xaml:C1RadialColorItem>
<Xaml:C1RadialColorItemx:Name="blueItem" SelectedIndex="0"ShowSelectedItem="True" AutoSelect="True"IsSelectable="False" >
</Xaml:C1RadialColorItem> - 「rainbowItem」という名前の C1RadialColorItem を選択し、次のマークアップを開始タグと終了タグの間に挿入します。これで、SolidColorBrush のサブメニュー項目が追加されます。
マークアップ コードのコピー<SolidColorBrushColor="Red"/>
<SolidColorBrushColor="Orange"/>
<SolidColorBrushColor="Yellow"/>
<SolidColorBrushColor="Green"/>
<SolidColorBrushColor="Blue"/>
<SolidColorBrushColor="Indigo"/>
<SolidColorBrushColor="Violet"/> - 「greenItem」という名前の C1RadialColorItem を選択し、次のマークアップを開始タグと終了タグの間に挿入します。これで、いくつかの階調の緑色に対応する C1RadialColorItem サブメニュー項目が追加されます。
マークアップ コードのコピー<Xaml:C1RadialColorItemx:Name="greenItem" SelectedIndex="5"
ShowSelectedItem="True" AutoSelect="True"IsSelectable="False" Xaml:C1NagScreen.Nag="True">
<Xaml:C1RadialColorItem ToolTip="Lime"Brush="#FF92D050" GroupName="Green"/>
<Xaml:C1RadialColorItem ToolTip="Light Green"Brush="#FFC6EFCE" GroupName="Green"/>
<Xaml:C1RadialColorItem ToolTip="Green"Brush="#FF00FF00" GroupName="Green"/>
<Xaml:C1RadialColorItemToolTip="Dark Green" Brush="#FF1D421E"GroupName="Green"/>
<Xaml:C1RadialColorItem ToolTip="Dark Green"Brush="#FF1D5A2D" GroupName="Green"/>
<Xaml:C1RadialColorItem ToolTip="Dark Green"Brush="Green" GroupName="Green"/>
<Xaml:C1RadialColorItem ToolTip="Dark Green"Brush="#FF008000" GroupName="Green"/>
<Xaml:C1RadialColorItem ToolTip="Dark Green"Brush="#FF00B050" GroupName="Green"/>
</Xaml:C1RadialColorItem> - 「blueItem」という名前の C1RadialColorItem を選択し、次のマークアップを開始タグと終了タグの間に挿入します。これで、いくつかの階調の青色に対応する C1RadialColorItem サブメニュー項目が追加されます。
マークアップ コードのコピー<Xaml:C1RadialColorItemx:Name="blueItem" SelectedIndex="0"
ShowSelectedItem="True" AutoSelect="True"IsSelectable="False" Xaml:C1NagScreen.Nag="True">
<Xaml:C1RadialColorItem ToolTip="Blue"Brush="Blue" GroupName="Blue"/>
<Xaml:C1RadialColorItem ToolTip="Slate Blue"Brush="MediumSlateBlue" GroupName="Blue"/>
<Xaml:C1RadialColorItem ToolTip="Turquoise"Brush="Turquoise" GroupName="Blue"/>
<Xaml:C1RadialColorItemToolTip="Aqua" Brush="Aqua" GroupName="Blue"/>
<Xaml:C1RadialColorItem ToolTip="Sky Blue"Brush="SkyBlue" GroupName="Blue"/>
<Xaml:C1RadialColorItem ToolTip="Purple"Brush="#FFAC38AC" AccentBrush="#FF801C80"GroupName="Blue"/>
<Xaml:C1RadialColorItem ToolTip="Dark Purple"Brush="Purple" GroupName="Blue"/>
<Xaml:C1RadialColorItem ToolTip="Dark Blue"Brush="DarkBlue" GroupName="Blue"/>
</Xaml:C1RadialColorItem> - ページを右クリックし、リストから［コードの表示］を選択します。
- 次の using 文をページの先頭に追加します。
C# コードの書き方
C# コードのコピーusingC1.Xaml; - 次の ItemClick イベントをページに追加します。これで、C1RadialMenu から色を選択した際に、メインページに追加したテキストの色を変化させることができます。
C# コードの書き方
C# コードのコピーprivate voidcontextMenu_ItemClick(object sender, SourcedEventArgs e)
{
C1RadialMenuItem item = e.Source asC1RadialMenuItem;
if (item is C1RadialColorItem)
{
this.text.Foreground =((C1RadialColorItem)item).Brush;
txt.Text = "選択されました：" + ((C1RadialColorItem)item).Color.ToString();
}
else
{
txt.Text = "選択されました：" +(item.Header ?? item.Name).ToString();
}
} - ［F5］キーを押すか、デバッグを開始して、アプリケーションを実行します。アプリケーションを右クリックまたは右タップして C1RadialMenu を開くと、次の図のように表示されます。
- 緑色のサブメニューを選択すると、C1RadialMenu は次の図のようになります。
内側の色を選択することで、メインメニューに戻ることができます。 - 色を選択します。アプリケーションページ内のテキストの色が変わることがわかります。
関連トピック