显示基于事件的图像

本文关键字：图像 事件 于事件 显示 | 更新日期: 2023-09-27 18:27:08

我在一个网格>矩形中有两个图像。我想做的是能够互换地使用这些图像。I.E如果发生某种事情（点击按钮），我希望它从WebCasting.PNG更改为OffAir.PNG和Vice Versa.PNG。我曾尝试使用Visiblity="隐藏"，但没有成功。

关于如何做到这一点，有什么建议吗？

XAML

<Grid>
        <Rectangle Margin="10,10,10,40">
            <Rectangle.Fill>Black</Rectangle.Fill>
        </Rectangle>
        <Image Source="/Images/Webcasting.png" />
        <Image Source="/Images/OffAir.png" />
     </Grid>

按钮按压代码

 #region Button Play Click
     private void btnPlay_Click(object sender, RoutedEventArgs e)
     {
         //toggle UI
         CanStart = false;
         CanStop = true;
         IsRecording = true;      
    }

显示基于事件的图像

非琐碎的UI项最好使用样式和触发器设置。通过这种方式，您可以专注于播放器的编码功能，并让xaml负责UI；

因此：

  1. 而不是使用2个图像，使用一个，并且只更改其来源
  2. 使用切换按钮代替常规按钮，并使用样式将其内容设置为"播放/停止"

例如：

<Grid x:Name="LayoutRoot">
  <Image  Style="{DynamicResource RecordingStatusImage}" />
  <ToggleButton x:Name="PlayButton" Style={DynamicResource PlayToggleButton} />
</Grid>

然后将样式添加到您的资源中，例如

 <UserControl.Resources>
         <BitmapImage x:Key="Webcast"  UriSource="/Images/Webcasting.png"/>
    <BitmapImage x:Key="OffAir"  UriSource="/Images/OffAir.png"/>
<Style x:Key="RecordingStatusImage" TargetType="Image">
    <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=PlayButton, Path=IsChecked}"  Value="True">
            <Setter Property="Source" Value="{DynamicResource Webcast}" />
         </DataTrigger>
         <DataTrigger Binding="{Binding ElementName=PlayButton, Path=IsChecked}"  Value="False">
            <Setter Property="Source" Value="{DynamicResource OffAir}" />
         </DataTrigger>
    </Style.Triggers>
</Style>
 <Style TargetType="ToggleButton" x:Key="PlayToggleButton">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
          <Setter Property="Content" Value="Stop" />
         </Trigger>
         <Trigger Property="IsChecked" Value="False">
         <Setter Property="Content" Value="Play" />
         </Trigger>
      </Style.Triggers>
    </Style>
</UserControl.Resources>

希望这能有所帮助。

有很多方法可以实现所需的功能。这里有一个简单的方法。

XAML：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid>
        <Rectangle Margin="10,10,10,40">
            <Rectangle.Fill>Black</Rectangle.Fill>
        </Rectangle>
        <Image Name="img1" Source="http://media.smashingmagazine.com/wp-content/uploads/2010/09/44_add_site_stackoverflow.jpg" Visibility="Hidden"/>
        <Image Name="img2" Source="http://www.donkersct.nl/wordpress/wp-content/uploads/2012/07/stackoverflow.png"/>
    </Grid>
    <Button Grid.Row="1" Content="Change" Click="Button_Click" Margin="5"></Button>
</Grid>

代码隐藏：

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (this.img1.Visibility == System.Windows.Visibility.Visible)
        {
            this.img1.Visibility = System.Windows.Visibility.Hidden;
            this.img2.Visibility = System.Windows.Visibility.Visible;
        }
        else
        {
            this.img1.Visibility = System.Windows.Visibility.Visible;
            this.img2.Visibility = System.Windows.Visibility.Hidden;
        }
    }
相关文章：