0

我在网格>矩形中有两个图像。我想做的是能够互换使用这些图像。IE 如果发生某件事（单击按钮），我希望它从 WebCasting.PNG 更改为 OffAir.PNG 和 Vice Versa.PNG。我试过使用 Visiblity="Hidden" 没有任何运气。

关于如何做到这一点的任何建议？

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;      
    }
4

2 回答 2

2

非平凡的 UI 项目最好使用样式和触发器进行设置。这样您就可以专注于播放器的编码功能，让 xaml 处理 UI；

因此 ：

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

例如：

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

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

 <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>

希望这可以帮助。

于 2013-08-11T20:42:43.720 回答
1

有很多方法可以实现您需要的功能。这是一个简单的方法。

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;
        }
    }
于 2013-08-09T17:57:14.300 回答