Question

我试图在点击图像时更改图像和文字。有关详细信息，请参阅下图。

下面是xaml部分的代码。前进和后退按钮应按顺序更改图像和文本，如果任何一个连续tapp on Forward按钮图像将改变，文本也将改变，直到图像没有结束和相同在后退按钮的情况下。 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; }
}

点击图像会更改uwp中的图像和文本

1 个答案: