WP7 - ボタンをクリックすると背景とBorderBrushが表示されます。

Question

ここでは、ボタンの背景色をクリックすると設定に関するいくつかの質問があります。解決策として、これを使用し これらの質問：

<phone:PhoneApplicationPage ...> 
    <phone:PhoneApplicationPage.Resources> 
     <Style x:Key="ButtonStyle1" TargetType="Button"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid Background="Transparent"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="MouseOver"/> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ColorAnimation Duration="0" To="Cyan" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Black"> 
           <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          </Border> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </phone:PhoneApplicationPage.Resources> 

    <Grid x:Name="LayoutRoot" Background="Transparent"> 
     <Button Content="Button" Style="{StaticResource ButtonStyle1}"/> 
    </Grid> 
</phone:PhoneApplicationPage> 

が、私はこのテンプレートを使用しているよもBorderBrushとフォアグラウンド色を設定するには、私の微調整は、このXAMLは悪い効果になってしまっただけました。

は[注：色はスタイルによって上書きされるため、動作が、私は分離コードで色を設定したときに私のアプリが実行されたとき、彼らは有効にならないことがある。]

Answer 1

- あなたはそれが間違ってやっています。

XAMLの禅と戦わないでください。 Embrace ExpressionをすべてのGUIデザインの開発ワークフローにブレンドするか、手動XAML編集の謎を解きほぐしてください。

特にVisualStateManagermの手動編集では、XAMLはSilverlightチームによって設計されたように全く意味をなさないので、Expression Blendから最適に使用できます。

これら4つの方法を見て30分を過ごすことを強くお勧めします。スティーブホワイトのVSMビデオ@http://expression.microsoft.com/en-us/cc643423.aspx

これらの4つのビデオは、VSMの使用方法を理解するための初期の段階で、私のUIロジックをビジュアルステートに正しく表現する方法について多くの助けになりました。クリックで変更する背景色を取得Expression Blendので

は同じくらい簡単ですなど：

1. ドラッグ＆ドロップ& Expression Blendの中に新しいボタン。
2. 右クリックし、[テンプレートの編集 - >コピーの編集]をクリックします。
3. 「状態」ペインから「押し込まれた」VSM状態を選択します。
4. "ButtonBackground"の背景色を変更します。

Answer 2

この議論をチェックしてください： 手動でXAMLを微調整している場合Setting a background property from a storyboard

とも Button Styles and Templates