0

Grid>Rectangle 内に 2 つの画像があります。私がやりたいことは、これらの画像を交換可能に使用できるようにすることです。IE あることが起こった場合 (ボタンがクリックされた場合) WebCasting.PNG から OffAir.PNG およびその逆の 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 に答える