点击图像更改图像和文字uwp

Question

我正在尝试更改图像和文字上的图像点击。 请参阅下图了解更多信息。

下面是对XAML part.The前进和后退按钮应该改变形象，并在orderwise文本代码意味着，如果任何一个前进按钮图像汽车无TAPP将改变和文字也将发生变化，直到在后退按钮的情况下，图像不完全相同。 XAML代码：

<Page 
    x:Class="Learn_color_uwp.L_Col_Act" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:Learn_color_uwp" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Grid Name="L_Col_View"> 
     <Grid.Background> 
      <ImageBrush ImageSource="Assets/LearnColor/bg.png"/> 
     </Grid.Background>   
     <Image x:Name="imgContainer" 
      Source="Assets/LearnColor/ob_bg.png"    
       Height="240" Width="300"/> 
     <Image x:Name="image" 
      Source="Assets/LearnColor/Object/ob_gray_1.png"    
       Height="190" Width="290" 
       VerticalAlignment="Center" 
       /> 
     <Image x:Name="Header" 
      Source="Assets/LearnColor/Header/_0007_header_gray.png"    
       Height="100" Width="330" 
       VerticalAlignment="Top" 
       Margin="0,20,0,0"    
       /> 
     <Image x:Name="objName" 
      Source="Assets/LearnColor/object_name_bg.png"    
       Height="100" Width="280" 
       VerticalAlignment="Bottom" 
       Margin="0,0,0,30"/> 
     <Image x:Name="prevBtn" 
      Source="Assets/LearnColor/Button/btn_previous_arrow.png"    
       Height="90" Width="100" 
       VerticalAlignment="Top" 
       HorizontalAlignment="Left" 
       Margin="60,10,0,0" 
       Tapped="BckImgChng"/> 
     <Image x:Name="FwdBtn" 
      Source="Assets/LearnColor/Button/btn_next_arrow.png"    
       Height="90" Width="100" 
       VerticalAlignment="Top" 
       HorizontalAlignment="Right" 
       Margin="0,10,60,0" 
       Tapped="FwdImgChng"/> 
     <Image x:Name="prevObjBtn" 
      Source="Assets/LearnColor/Button/_0004_previous-copy-5.png"    
       Height="90" Width="80" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Left" 
       Margin="80,10,0,0"/> 
     <Image x:Name="fwdObjBtn" 
      Source="Assets/LearnColor/Button/_0005_next-copy-5.png"    
       Height="90" Width="80" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Right" 
       Margin="0,10,80,0"/> 
     <Image x:Name="homeBtn" 
      Source="Assets/LearnColor/Button/btn_home.png"    
       Height="90" Width="80" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Left" 
       Margin="20,140,0,0"/> 
     <Image x:Name="volBtn" 
      Source="Assets/LearnColor/Button/btn_sound.png"    
       Height="90" Width="80" 
       VerticalAlignment="Bottom" 
       HorizontalAlignment="Left" 
       Margin="20,0,0,15"/> 
    </Grid> 
</Page> 

Answer 1

你正在寻找的控制是一个FlipView。你必须设计一些适合你的设计的样式，但不能在XAML中完成。

的ItemsTemplate是单个项目的布局：

<FlipView x:Name="flipView1" Width="480" Height="270" 
      BorderBrush="Black" BorderThickness="1"> 
    <FlipView.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <TextBlock Text="{Binding Header}" /> 
       <Image Width="480" Height="270" Stretch="UniformToFill" 
         Source="{Binding Image}"/> 
      </Grid> 
     </DataTemplate> 
    </FlipView.ItemTemplate> 
</FlipView> 

设置的ItemsSource在后面的代码或绑定在XAML来牵着你的图像信息对象的集合。例如，像这样：

public class MyImage 
{ 
    public string Header { get; set; } 
    public string Image { get; set; } 
}