創建自定義Windows Phone按鈕

Question

我在WP應用程序中創建了一個自定義按鈕。我想讓它看起來像一個標準的Windows Phone 8按鈕。 XAML代碼

<Grid Name="btnCancle" Height="76" Width="76" Margin="24" ManipulationStarted="btnCancle_ManipulationStarted" ManipulationCompleted="btnCancle_ManipulationCompleted" > 
        <Ellipse Name="ellipseCancle" Grid.Row="2" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Height="76" Width="76" /> 
        <Canvas x:Name="appbar_close" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0"> 
         <Path Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="{StaticResource PhoneForegroundBrush}" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/> 
        </Canvas> 
</Grid> 

的事件處理程序的

private void btnCancle_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e) 
    { 
     Brush br = (Brush)Application.Current.Resources["PhoneAccentBrush"]; 
     ellipseCancle.Fill = br; 

    } 

private void btnCancle_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e) 
    { 
     Brush br = (Brush)Application.Current.Resources["PhoneBackgroundBrush"]; 
     ellipseCancle.Fill = br;    
    } 

我的問題是，當我按一下按鈕，有按鈕充當notmal按鈕之前稍有延遲。（該backgrounc變化碼到PhoneAccentColor並返回）。只要我觸摸它，背景顏色不會改變。但經過一次或兩次嘗試後，其行爲正常。我正在編寫代碼以在Tap事件處理程序中執行該按鈕的操作。但只要用戶觸摸它，我就需要使它像正常按鈕一樣運行。我做錯了什麼，我能做些什麼來解決它？請幫助..在此先感謝..

Answer 1

嘗試使用更改按鈕的控件模板/樣式。這將允許您更改按鈕的外觀，但保持用戶對按鈕的所有行爲。 XAML的一大優勢就是能夠做到這一點。

所以添加一個按鈕到您的手機網頁，然後在設計師的正確選擇文檔大綱去你想要再整你的按鈕，用鼠標右鍵單擊該按鈕，下模板選擇編輯副本。 ..。您現在可以將樣式命名並將其添加到頁面資源中。現在只要貝婁VisualStateManager.Groups你會發現源繪製按鈕，你可以用你的代碼替換它：

<phone:PhoneApplicationPage.Resources> 
    <Style x:Key="ButtonStyle1" TargetType="Button"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> 
     <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/> 
     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/> 
     <Setter Property="Padding" Value="10,5,10,6"/> 
     <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="Fill" Storyboard.TargetName="ContentContainer"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ContentContainer"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
             </ObjectAnimationUsingKeyFrames>--> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Ellipse Name="ButtonBackground" Grid.Row="2" Fill="{TemplateBinding Background}" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Height="76" Width="76" /> 
         <Canvas Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0"> 
          <Path x:Name="ContentContainer" Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="{StaticResource PhoneForegroundBrush}" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/> 
         </Canvas> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    </phone:PhoneApplicationPage.Resources> 

這裏是按鈕看起來應該像在此之後的東西，注意風格被設置到您剛剛創建的控制模板。

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource ButtonStyle1}"/> 

HTH