Q&A
上の3つのボタンを押したら、
ボタンのタグに対応したgridが表示されるようにしたいです。
上のボタンについてですが、
チェックボックスにしていて、
ボタンをおしたら、色が変わり、それ以外の2つのボタンはデフォルトの色にしたいです。
現在のコードは下記です。
よろしくお願いいたします。
XAML
1 <Page.Resources > 2 <Style x :Key="CheckBoxStyle1" TargetType="CheckBox"> 3 <Setter Property ="Background" Value="Transparent"/> 4 <Setter Property ="Foreground" Value="{ ThemeResource CheckBoxContentForegroundThemeBrush}"/> 5 省略 6 <VisualState x :Name="PointerOver"> 7 <Storyboard> 8 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty ="Fill" Storyboard.TargetName="NormalRectangle"> 9 <DiscreteObjectKeyFrame KeyTime ="0" Value="{ ThemeResource CheckBoxPointerOverBackgroundThemeBrush}"/> 10 </ObjectAnimationUsingKeyFrames> 11 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty ="Stroke" Storyboard.TargetName="NormalRectangle"> 12 <DiscreteObjectKeyFrame KeyTime ="0" Value="{ ThemeResource CheckBoxPointerOverBorderThemeBrush}"/> 13 </ObjectAnimationUsingKeyFrames> 14 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty ="Fill" Storyboard.TargetName="CheckGlyph"> 15 <DiscreteObjectKeyFrame KeyTime ="0" Value="{ ThemeResource CheckBoxPointerOverForegroundThemeBrush}"/> 16 </ObjectAnimationUsingKeyFrames> 17 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty ="Fill" Storyboard.TargetName="IndeterminateGlyph"> 18 <DiscreteObjectKeyFrame KeyTime ="0" Value="{ ThemeResource CheckBoxPointerOverForegroundThemeBrush}"/> 19 </ObjectAnimationUsingKeyFrames> 20 </Storyboard> 21 </VisualState> 22省略 23 <VisualState x :Name="Disabled"> 24 <Storyboard> 25 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty ="Fill" Storyboard.TargetName="NormalRectangle"> 26 <DiscreteObjectKeyFrame KeyTime ="0" Value="{ ThemeResource CheckBoxDisabledBackgroundThemeBrush}"/> 27 </ObjectAnimationUsingKeyFrames> 28 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty ="Stroke" Storyboard.TargetName="NormalRectangle"> 29 <DiscreteObjectKeyFrame KeyTime ="0" Value="{ ThemeResource CheckBoxDisabledBorderThemeBrush}"/> 30 </ObjectAnimationUsingKeyFrames> 31 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty ="Fill" Storyboard.TargetName="CheckGlyph"> 32 <DiscreteObjectKeyFrame KeyTime ="0" Value="{ ThemeResource CheckBoxDisabledForegroundThemeBrush}"/> 33 </ObjectAnimationUsingKeyFrames> 34 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty ="Fill" Storyboard.TargetName="IndeterminateGlyph"> 35 <DiscreteObjectKeyFrame KeyTime ="0" Value="{ ThemeResource CheckBoxDisabledForegroundThemeBrush}"/> 36 </ObjectAnimationUsingKeyFrames> 37 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty ="Foreground" Storyboard.TargetName="ContentPresenter"> 38 <DiscreteObjectKeyFrame KeyTime ="0" Value="{ ThemeResource CheckBoxContentDisabledForegroundThemeBrush}"/> 39 </ObjectAnimationUsingKeyFrames> 40 </Storyboard> 41 </VisualState> 42 </VisualStateGroup> 43 <VisualStateGroup x :Name="CheckStates"> 44 <VisualState x :Name="Checked"> 45 <Storyboard> 46 <DoubleAnimation Duration ="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/> 47 </Storyboard> 48 </VisualState> 49 <VisualState x :Name="Unchecked"/> 50 <VisualState x :Name="Indeterminate"> 51 <Storyboard> 52 <DoubleAnimation Duration ="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="IndeterminateGlyph"/> 53 </Storyboard> 54 </VisualState> 55 </VisualStateGroup> 56 <VisualStateGroup x :Name="FocusStates"> 57 <VisualState x :Name="Focused"> 58 <Storyboard> 59 <DoubleAnimation Duration ="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/> 60 <DoubleAnimation Duration ="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/> 61 </Storyboard> 62 </VisualState> 63 <VisualState x :Name="Unfocused"/> 64 <VisualState x :Name="PointerFocused"/> 65 </VisualStateGroup> 66 </VisualStateManager.VisualStateGroups> 67 <Grid> 68 <Grid.ColumnDefinitions> 69 <ColumnDefinition Width ="27"/> 70 <ColumnDefinition Width ="*"/> 71 </Grid.ColumnDefinitions> 72 <Grid VerticalAlignment ="Top"> 73 <Rectangle x :Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" Height="21" Stroke ="{ThemeResource CheckBoxBorderThemeBrush}" StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" UseLayoutRounding="False" Width="21"/> 74 <Path x :Name="CheckGlyph" Data="F1 M 0,58 L 2,56 L 6,60 L 13,51 L 15,53 L 6,64 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush }" FlowDirection="LeftToRight" Height="14" Opacity="0" Stretch="Fill" Width ="16"/> 75 <Rectangle x :Name="IndeterminateGlyph" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" Height="9" Opacity ="0" UseLayoutRounding="False" Width="9"/> 76 <Rectangle x :Name="FocusVisualWhite" Height="27" Opacity ="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke ="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" Width ="27"/> 77 <Rectangle x :Name="FocusVisualBlack" Height="27" Opacity ="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke ="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" Width ="27"/> 78 </Grid> 79 <ContentPresenter x :Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{ TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding }" VerticalAlignment="{ TemplateBinding VerticalContentAlignment}"/> 80 </Grid> 81 </Border> 82 </ControlTemplate> 83 </Setter.Value> 84 </Setter> 85 </Style> 86 </Page.Resources > 87 88 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush }"> 89 <Grid.RowDefinitions> 90 <RowDefinition/> 91 <RowDefinition/> 92 </Grid.RowDefinitions> 93 <!--上段--> 94 <StackPanel Orientation ="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom"> 95 <CheckBox x :Name="checkBox1" Content="CheckBox" HorizontalAlignment ="Left" VerticalAlignment="Stretch" Width="270" Style ="{StaticResource CheckBoxStyle1 }"/> 96 <CheckBox x :Name="checkBox2" Content="CheckBox" HorizontalAlignment ="Left" VerticalAlignment="Stretch" Width="270" Style ="{StaticResource CheckBoxStyle1 }"/> 97 <CheckBox x :Name="checkBox3" Content="CheckBox" HorizontalAlignment ="Left" VerticalAlignment="Stretch" Width="270" Style ="{StaticResource CheckBoxStyle1 }"/> 98 </StackPanel> 99 100 <!--下段--> 101 <Grid Grid.Row="1" x :Name="Grid_01" Visibility="Visible"/> 102 <Grid Grid.Row="1" x :Name="Grid_02" Visibility="Collapsed"/> 103 <Grid Grid.Row="1" x :Name="Grid_03" Visibility="Collapsed"/> 104 </Grid > 105</Page> 106
回答1件
0
ベストアンサー
こんにちは。
チェックボックスにしていて、
ボタンをおしたら、色が変わり、それ以外の2つのボタンはデフォルトの色にしたいです。
ということですが、チェックボックスではなく、ラジオボタンを使用すると簡単です。
私ならこんな感じで書きます。
＃ ストアアプリで通用するかはわかりません（すみません）
直接ここに書いているので、ビルドも通らないと思います
ボタンのチェック状態をVisibilityに変換するには、コンバータを使います。
下記のコードではBooleanToVisibilityConverterがそうです。
コンバータの例は下記を参考にしてください。
Windowsストアアプリ入門 vol71:TextBlockに下線(アンダーライン)をつける
C#
1 <Page.Resources> 2 <BooleanToVisibilityConverter x:Key="toVisible" /> 3 </Page.Resources> 4 5 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush }"> 6 <Grid.RowDefinitions> 7 <RowDefinition/> 8 <RowDefinition/> 9 </Grid.RowDefinitions> 10 11 <!--上段--> 12 <StackPanel Grid.Row="0" Orientation ="Horizontal" HorizontalAlignment="Center"> 13 <StackPanel.Resources> 14 <Style BasedOn="{StaticResource RadioButtonStyle1}" 15 TargetType="{x:Type RadioButton}"> 16 <Setter Property="Content" Value="RadioButton" /> 17 <Setter Property="HorizontalAlignment" Value="Left" /> 18 <Setter Property="VerticalAlignment" Value="Stretch" /> 19 <Setter Property="Width" Value="270" /> 20 </Style> 21 </StackPanel.Resources> 22 <RadioButton x:Name="radioButton1" /> 23 <RadioButton x:Name="radioButton2" /> 24 <RadioButton x:Name="radioButton3" /> 25 </StackPanel> 26 27 <!--下段--> 28 <Grid Grid.Row="1"> 29 <Grid x :Name="Grid_01" 30 Visibility="{Binding IsChecked, ElementName=radioButton1, Converter={StaticResource toVisible}"/> 31 <Grid x :Name="Grid_02" 32 Visibility="{Binding IsChecked, ElementName=radioButton2, Converter={StaticResource toVisible}"/> 33 <Grid x :Name="Grid_03" 34 Visibility="{Binding IsChecked, ElementName=radioButton3, Converter={StaticResource toVisible}"/> 35 </Grid> 36 37 </Grid >
投稿2015/10/09 00:50
編集2015/10/09 02:36
総合スコア225
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/13 14:19
2015/10/14 00:23
2015/10/14 07:13