如何从 ViewModel 动态 "switch" StaticResource?

How to dynamically "switch" StaticResource from ViewModel?

<Window.Resources>        
     <StackPanel Orientation="Horizontal" x:Key="disconnected">
         <Image Source="images/rpidisconnected.png" Width="20"/>
         <TextBlock Text="Disconnect" Margin="2 2 0 0"/>
     </StackPanel>
     <StackPanel Orientation="Horizontal" x:Key="connected">
         <Image Source="images/rpiconnected.png" Width="20"/>
         <TextBlock Text="Connect" Margin="2 2 0 0"/>
     </StackPanel>
</Window.Resources>

如何为下面的按钮控件从 ViewModel 动态切换“已断开”和“已连接”?

<Button Width="100" Content="{StaticResource disconnected}"/>

可以通过带触发器的样式完成:

<Button Width="100">
 <Button.Style>
  <Style TargetType="Button">
   <Setter Property="Content" Value="{StaticResource disconnected}"/>
   <Style.Triggers>
    <DataTrigger Binding="{Binding IsConnectedViewModelBoolProperty}" Value="True">
     <Setter Property="Content" Value="{StaticResource connected}"/>
    </DataTrigger>
   </Style.Triggers>
  </Style>
 </Button.Style>
</Button>

或使用图像样式更简单:

<Button Width="100">
 <StackPanel Orientation="Horizontal">
  <Image Width="20">
   <Image.Style>
    <Style TargetType="Image">
     <Setter Property="Source" Value="images/rpidisconnected.png"/>
     <Style.Triggers>
      <DataTrigger Binding="{Binding IsConnectedViewModelBoolProperty}" Value="True">
       <Setter Property="Source" Value="images/rpiconnected.png"/>
      </DataTrigger>
     </Style.Triggers>
    </Style>
   </Image.Style>
  </Image>
  <TextBlock Text="Connect" Margin="2 2 0 0"/>
 </StackPanel>
</Button>