显示基于事件的图像

本文关键字:图像 事件 于事件 显示 | 更新日期: 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;
        }
    }