Нажатие на изображение меняет изображение и текст в uwp

Question

Я пытаюсь изменить изображение и текст при нажатии на изображение. Для получения дополнительной информации см. Изображение ниже.

Ниже приведен код XAML part.The вперед и назад кнопки должны изменить изображение и текст в orderwise означает, что если какой-либо один Таппы на непрерывно вперед изображении кнопки изменится, и текст также будет меняться, пока изображение не заканчивается, а в случае кнопки назад. 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; } 
}