Tùy chỉnh trạng thái chuyển đổi của nút chuyển đổi trong wpf

Question

Tôi muốn tùy chỉnh trạng thái chuyển đổi của nút chuyển đổi trong wpf. Tôi muốn đặt hình ảnh thành nút bật/tắt khi bật và đặt hình ảnh khác khi tắt. Để làm như vậy, tôi đã nghĩ đến việc sử dụng trình kích hoạt. Đây là cách tôi đã kết thúc,

<Window ...> 
    <Window.Resources> 
     <Image x:Key="OnImage" Source="C:\ON.jpg" /> 
     <Image x:Key="OffImage" Source="C:\OFF.jpg" /> 
     <Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton"> 
      <Style.Triggers> 
       <Trigger Property="IsChecked" Value="True"> 
        <Setter Property="Content" Value="{StaticResource OnImage}" /> 
       </Trigger> 
       <Trigger Property="IsChecked" Value="False"> 
        <Setter Property="Content" Value="{StaticResource OffImage}" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Window.Resources> 
    <ListBox> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       ... 
       <ToggleButton IsChecked="{Binding Status}" Width="100" Height="35" Style="{StaticResource OnOffToggleImageStyle}" /> 
       ... 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
</Window> 

Đoạn mã trên dường như chỉ hoạt động tốt cho hai mục trong hộp danh sách. Nếu nhiều mục có giá trị ràng buộc, trạng thái là đúng, nó không hoạt động (nó chỉ hoạt động với một mục như vậy). Vui lòng cho tôi biết liệu tôi có đang đi đúng hướng hay không. Cũng cho tôi biết cách khác để đạt được điều này.

Answer 1

Vấn đề ở đây là vì bạn đang sử dụng tài nguyên Image. Image trong tài nguyên của bạn là một ví dụ cụ thể về điều khiển. Nó chỉ có thể ở một nơi tại một thời điểm. Vì vậy, khi bạn có nhiều hơn một mục trong danh sách của bạn ...

này nên làm việc cho bạn:

<Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton"> 
<Style.Triggers> 
    <Trigger Property="IsChecked" Value="True"> 
    <Setter Property="Content"> 
     <Setter.Value> 
     <Image Source="C:\ON.jpg" /> 
     </Setter.Value> 
    </Setter> 
    </Trigger> 
    <Trigger Property="IsChecked" Value="False"> 
    <Setter Property="Content"> 
     <Setter.Value> 
     <Image Source="C:\OFF.jpg" /> 
     </Setter.Value> 
    </Setter> 
    </Trigger> 
</Style.Triggers> 
</Style> 

Lưu ý rằng bạn có thể cải thiện hiệu suất của điều này bằng cách sử dụng một ImageSource cho mỗi tập tin hình ảnh trong bạn tài nguyên, sau đó tham chiếu điều này trong số Image. Điều này có nghĩa là mỗi hình ảnh chỉ được nạp một lần từ đĩa, thay vì 2 * N lần (trong đó N là số mục trong danh sách của bạn.)

Answer 2

This answer sẽ giúp bạn. Trong đó tôi lấy một ToggleButton và tạo kiểu cho nó giống như ToggleButton trong một TreeView (phần +/- để mở rộng các nút sụp đổ). Bạn chỉ cần thay đổi đường dẫn vẽ dấu - và +, để hiển thị hình ảnh của bạn thay thế.

Ở đây cá nhân hóa bạn, chỉ cần đặt một hình ảnh có tên là "on.jpg" và một hình ảnh khác được gọi là "off.jpg" trong thư mục C: \ của bạn và nó sẽ hoạt động bằng cách sao chép/dán vào cửa sổ của bạn:

<Window.Resources> 
     <SolidColorBrush x:Key="GlyphBrush" Color="#444" /> 
     <ControlTemplate x:Key="toggleButtonTemplate" TargetType="ToggleButton"> 
      <Grid 
       Width="15" 
       Height="13" 
       Background="Transparent"> 
       <Image x:Name="ExpandImage" 
         Source="C:\off.jpg" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" 
         Margin="1,1,1,1" />      
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsChecked" 
        Value="True"> 
        <Setter Property="Source" 
         TargetName="ExpandImage" 
         Value="C:\on.jpg"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
     <Style x:Key="toggleButtonStyle" TargetType="ToggleButton"> 
      <Setter Property="Template" Value="{StaticResource toggleButtonTemplate}" /> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <ToggleButton Style="{StaticResource toggleButtonStyle}" /> 
    </Grid> 

Answer 3

Giống như Drew Noakes đã nói, trong đoạn trích của tôi chỉ có hai hình ảnh. Vì vậy, chỉ có hai mục đang hoạt động đúng. Tôi đã giải quyết vấn đề này với đoạn mã sau.

<ToggleButton 
    Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" 
    VerticalAlignment="Center" HorizontalAlignment="Center" 
    IsChecked="{Binding Status}" 
    Width="100" Height="35"> 
    <ToggleButton.Resources> 
    <Image x:Key="OnImage" Source="C:\ON.jpg" /> 
    <Image x:Key="OffImage" Source="C:\OFF.jpg" /> 
    </ToggleButton.Resources> 
    <ToggleButton.Style> 
    <Style TargetType="ToggleButton"> 
     <Style.Triggers> 
     <Trigger Property="IsChecked" Value="True"> 
      <Setter Property="Content" Value="{StaticResource OnImage}"> 
      </Setter> 
     </Trigger> 
     <Trigger Property="IsChecked" Value="False"> 
      <Setter Property="Content" Value="{StaticResource OffImage}"> 
      </Setter> 
     </Trigger> 
     </Style.Triggers> 
    </Style> 
    </ToggleButton.Style> 
</ToggleButton> 

Đơn giản, tôi đã chuyển trình kích hoạt vào mẫu dữ liệu. Dunno liệu đây có phải là câu trả lời đúng không. Dường như được làm việc

Answer 4

Đây là một ToggleButton với 3 hình ảnh và một popup:

1. Một hình ảnh khi IsChecked = false.
2. Hình ảnh khi IsChecked = true.
3. Một hình ảnh khi IsMouseOver = true.

Hình ảnh được lưu trữ trong tài nguyên dưới dạng BitmapImage để tránh thay đổi Hình ảnh trên trigers.

Các tệp hình ảnh phải được thêm vào tài nguyên và sau đó, các tệp được thêm vào thư mục "Resoruces" trong dự án phải được đánh dấu là BuildAction = Resource.

Nó cũng áp dụng độ mờ cho điều khiển Hình ảnh khi ToggleButton IsEnabled = false;

Code:

<ToggleButton 
     x:Name="btnToggleImage" 
     Margin="5" 
     Width="50"    
     Height="50" 
     > 
     <ToggleButton.Resources> 
      <BitmapImage x:Key="imgNormal" UriSource="/YOURPROJECTNAME;component/Resources/YourUncheckedImage.png"/> 
      <BitmapImage x:Key="imgHover" UriSource="/YOURPROJECTNAME;component/Resources/YourHoverImage.png"/> 
      <BitmapImage x:Key="imgChecked" UriSource="/YOURPROJECTNAME;component/Resources/YourCheckedImage.png"/> 
     </ToggleButton.Resources> 

     <ToggleButton.Style> 
      <Style TargetType="ToggleButton"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="ToggleButton"> 
          <Image 
           x:Name="PART_Image" 
           Source="{StaticResource imgNormal}" 
           /> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsChecked" Value="true"> 
            <Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgChecked}"/> 
           </Trigger> 
           <Trigger Property="IsMouseOver" Value="true"> 
            <Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgHover}"/> 
           </Trigger> 
           <Trigger Property="IsEnabled" Value="false"> 
            <Setter TargetName="PART_Image" Property="Opacity" Value="0.6"/> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </ToggleButton.Style> 
    </ToggleButton>   

    <Popup 
     x:Name="popup1" 
     PlacementTarget="{Binding ElementName=btnToggleImage}" 
     PopupAnimation="Slide" 
     IsOpen="{Binding ElementName=btnToggleImage, Path=IsChecked, Mode=TwoWay}" 
     StaysOpen="False" 
     MinWidth="{Binding ElementName=btnToggleImage, Path=Width}"> 
     <Grid Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"> 
      <!--<ItemsPresenter/>--> 
      <Label Content="Hello Wolrd!"/> 
     </Grid> 
    </Popup>