UWP按钮按下图像

Question

我正在开发一款面向手机和平板电脑的UWP应用程序，并且目前正在实施用相机拍照的功能。

我已经在相机预览中放了一个按钮控件，并用一个图标来表示按钮（参见下面的XAML代码）。

我的问题是，当我按下按钮，它变成一个半透明的灰色方形，这远离我用作图标的绿色圆环。

如何使用时按下按钮

<Grid > 
    <!--Camera preview--> 
    <CaptureElement Name="PreviewControl" Stretch="Uniform"/> 

    <Button Tapped="btnCancel_Tapped" Name="btnCancel" Margin="5,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="50" Width="65"> 
     <Button.Background> 
      <ImageBrush ImageSource="/Assets/images/btn_cancel.png"> 
      </ImageBrush> 
     </Button.Background> 
    </Button> 
    <Button HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,5" Name="btnPhoto" Tapped="btnPhoto_Tapped" IsEnabled="False" Width="70" Height="70"> 
     <Button.Background> 
      <ImageBrush ImageSource="/Assets/Images/btn_takepicture_off.png"> 
      </ImageBrush> 
     </Button.Background> 
    </Button> 

</Grid> 

Answer 1

如果我是你为其他图标，我会作出这样的图像按钮的模板内。 它不仅可以摆脱不需要的现有元素/按钮的外观（如它们的灰色方块），还可以让您轻松地给出它的行为，如鼠标悬停/按下它时所发生的行为。

为了以最简单的方式做到这一点，贴里面你<Button></Button>如下：

<Button.Template> 
     <ControlTemplate TargetType="Button"> 
      [[Anything you want your button to be made of goes here]] 
     </ControlTemplate> 
    </Button.Template> 

在我打上区域“[[任何你希望你的按钮进行的​​到这里]”你现在就可以建立你想要什么你的按钮看起来像从<Grid/>什么<Image/>以简单的零件，如<Ellipse/>或<Rectangle/>

Answer 2

要设置按您需要编辑按钮模板图像和编辑“按下”状态

刚刚页面资源和编辑路径添加该代码图像：

<Style x:Key="ButtonStyle1" TargetType="Button"> 

      <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
      <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
      <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/> 
      <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/> 
      <Setter Property="Padding" Value="8,4,8,4"/> 
      <Setter Property="HorizontalAlignment" Value="Left"/> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
      <Setter Property="FontWeight" Value="Normal"/> 
      <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
      <Setter Property="UseSystemFocusVisuals" Value="True"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"> 
             <Storyboard> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="PointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <ImageBrush ImageSource="SET YOUR IMAGE HERE.jpg"/> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

而这种风格应用到您的按钮：

Button Style="{StaticResource ButtonStyle1}" 

Answer 3

我用下面的代码时改变一次点击的按钮图片：

添加以下使用语句：

使用系统; using Windows.UI.Xaml.Media.Imaging;

Click事件中，添加以下代码：

 PicA.Source= new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/6.png", UriKind.Absolute) }; 

< ---异食癖表示图像（从工具箱中）和6.png是我的新我的资产文件夹中的图片。

如果您需要稍后将图像替换回原来的图像，则只需复制/粘贴上述代码并将图像名称（6.png改为任意）更改回原始图像。

约翰尼史密斯 - 设得兰英国

Answer 4

下面是使用TAPPED事件的另一示例：

private void MyBox_Tapped(object sender, TappedRoutedEventArgs e) 
{ 
    var image = sender as Image; 
    var bitmapImage = image?.Source as BitmapImage; 
    if (bitmapImage != null) 
    { 
     var source = bitmapImage.UriSource.LocalPath; 
     if (source == "/Assets/Green1 (Custom).png") 
     { 
      MyBox.Source = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/Red1 (Custom).png", UriKind.Absolute) }; 

     } 
     else if (source == "/Assets/Red1 (Custom).png") 
     { 
      MyBox.Source = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/Green1 (Custom).png", UriKind.Absolute) }; 

     } 
    } 

< ---上面的代码允许两个图像的帧间变化（上众多无限的IF语句 - 无穷无尽！）。您只需在每个“MyBox”语句之后添加编码，即可完成您的编程要求。

如果您通过使用按钮单击事件来合并我以前的回复，那么只需添加上面列出的编码即意味着可以使用单个按钮单击来完成许多任务并使用许多不同的图像。范围是无止境的，因为随后您可以在编码的每个部分中使用无限制的IF语句。希望这有助于大家...约翰尼

Answer 5

您还可以使用WintRT工具包中上的NuGet：

https://www.nuget.org/packages/winrtxamltoolkit/

从这个工具包可以使用的ImageButton那就是需要一到三个自定义按钮控制图像用于表示按钮的不同状态：正常，悬停，按下，禁用）。

下面是关于使用XAML样本：

<toolkit:ImageButton NormalStateImageSource="ms-appx:///Assets/normal_button_state.png" 
        PressedStateImageSource="ms-appx:///Assets/pressed_button_state.png"/> 

记住使用的xmlns你页面的顶部添加：

xmlns:toolkit ="using:WinRTXamlToolkit.Controls"