Question

我在Grid＆gt; Rectangle中有两个图像。我想做的是能够互换地使用这些图像。 I.E如果某件事发生（单击一个按钮）我希望它从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;      
    }

Answer 1

使用样式和触发器可以最好地设置非平凡的UI项目。通过这种方式，您可以专注于播放器的编码功能，并让xaml处理UI;

因此：

而是使用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>

希望这有帮助。

Answer 2

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

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

根据事件显示图像

2 个答案: