Создание пользовательской кнопки телефона Windows

Question

Я создал пользовательскую кнопку в своем приложении WP. Я хочу сделать его похожим на стандартную кнопку телефона с телефоном 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, чтобы это сделать.

Так добавить кнопку на страницу телефона, затем справа от дизайнера выбрать Document Outline перейти к кнопке вы хотите рестайлинг, щелкните правой кнопкой мыши на кнопке под Шаблон выбрать Редактировать копию. ... Теперь вы можете назвать стиль и разместить его на ресурсе страницы. Теперь просто ржали в 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}"/> 

НТН