c# - 切换开关内容未显示在 DataGrid 中

Question

我正在为我的拨动开关使用自定义样式。该样式已应用并且工作正常，并且显示“开”或“关”。问题是当我将切换开关添加到DataGrid.

项目DataGrid源绑定到模型，列isActive包含切换开关控件。如果是，则切换将采用绿色，如果isActive是，则为true红色false，但它不显示内容文本（“ON”，“OFF”）。

资源文件中切换开关的样式：

<Style x:Key="ActiveToggleSwitch" TargetType="{x:Type ToggleButton}">
    <Setter Property="IsChecked" Value="False"/>
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Template">

        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid x:Name="toggleSwitch">
                    <Border x:Name="Border" CornerRadius="10"
        Background="#C2283B"
        Width="90" Height="25">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0.6" Direction="0" Opacity="0.3" />
                        </Border.Effect>
                        <Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
             Margin="2 2 2 1"
             Stroke="Gray" StrokeThickness="0.2"
             HorizontalAlignment="Left" Width="22" >
                            <Ellipse.Effect>
                                <DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
                            </Ellipse.Effect>
                        </Ellipse>
                    </Border>

                    <TextBlock x:Name="txtOff" Text="{Binding TextOFF}" Margin="0 0 40 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White" FontSize="10" />
                    <TextBlock Opacity="0" x:Name="txtOn"  Text="{Binding TextON}" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold"  Foreground="White" HorizontalAlignment="Left" FontSize="10" />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True" >
                        <Trigger.EnterActions>

                            <BeginStoryboard>

                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Border"
                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                To="#34A543"
                                Duration="0:0:0.1" />
                                    <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                    Storyboard.TargetProperty="Margin"
                                    To="60 2 2 1"
                                    Duration="0:0:0.1" />
                                    <DoubleAnimation
                            Storyboard.TargetName="txtOff" 
                            Storyboard.TargetProperty="(TextBlock.Opacity)"
                            From="1.0" To="0.0" Duration="0:0:0:0.1"     />
                                    <DoubleAnimation
                            Storyboard.TargetName="txtOn" 
                            Storyboard.TargetProperty="(TextBlock.Opacity)"
                            From="0.0" To="1.0" Duration="0:0:0:0.1"  />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <!--  some out fading  -->
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Border"
                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                To="#C2283B"
                                Duration="0:0:0.1" />
                                    <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                    Storyboard.TargetProperty="Margin"
                                    To="2 2 2 1"
                                    Duration="0:0:0.1" />
                                    <DoubleAnimation
                            Storyboard.TargetName="txtOff" 
                            Storyboard.TargetProperty="(TextBlock.Opacity)"
                            From="0" To="1.0" Duration="0:0:0:0.1"       />
                                    <DoubleAnimation
                            Storyboard.TargetName="txtOn" 
                            Storyboard.TargetProperty="(TextBlock.Opacity)"
                            From="1.0" To="0.0" Duration="0:0:0:0.1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                        <Setter Property="Foreground" Value="{DynamicResource IdealForegroundColorBrush}" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                    </Trigger>

                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource GrayBrush7}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="VerticalContentAlignment" Value="Center" />
</Style>

MainWindow.xaml：

<telerik:GridViewDataColumn x:Name="Activetoogle" IsReadOnly="True"  HeaderCellStyle="{StaticResource CustomGridViewHeaderCellStyle}" Header="{StaticResource ActivityTriggerSwitch}" DataMemberBinding="{Binding isActive}" Width="*">
    <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
            <StackPanel  Height ="Auto" >
                <ToggleButton  x:Name="isActive"  VerticalAlignment="Center" IsEnabled="False"  Style="{StaticResource ActiveToggleSwitch}"
                 HorizontalAlignment="Right" Width="auto" FlowDirection="RightToLeft" IsChecked="{Binding empisActive}" Content="{Binding ToogleContent}"  />
            </StackPanel>
        </DataTemplate>
    </telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>

主窗口.xaml.cs

public MainWindow(){
    InitializeComponent();
    TextOFF = (string)Application.Current.Resources["NotActive"];
    TextON = (string)Application.Current.Resources["IsActive"];
}
// ...

我正在尝试让文本显示在切换开关的列中，我该怎么做？

注意：如果未在数据模板内创建切换开关，则此方法有效。

切换按钮应包含文本（“ON”或“OFF”）。

Answer 1

您可以直接在 xaml 中使用字符串资源，在您的情况下使用 ViewModel 是不必要的步骤

xmlns:stringResources="clr-namespace:YourApp.Properties"

<TextBlock x:Name="txtOff" Text="{x:Static stringResources:Resources.NotActive}" Margin="0 0 40 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White" FontSize="10" />

Answer 2

TextOFF和TextON属性是在您的，而不是在网格视图列中当前项目MainWindow的数据上下文中定义的。由于您的绑定硬连接到当前数据上下文，因此这不起作用，属性未在此处定义。

肮脏的解决方法

您可以像下面这样更改数据上下文，这是一个非常肮脏的解决方法，我不推荐它。它将数据上下文设置为MainWindow，因此可以ToggleButton工作并利用StackPanel数据上下文来绑定项目。

<ToggleButton  x:Name="isActive"
               VerticalAlignment="Center"
               IsEnabled="False"
               Style="{StaticResource ActiveToggleSwitch}"
               HorizontalAlignment="Right"
               Width="auto"
               FlowDirection="RightToLeft"
               DataContext="{Binding RelativeSource={RelativeSource AncestorType={x:Type YourProject:MainWindow}}}"
               IsChecked="{Binding DataContext.empisActive, RelativeSource={RelativeSource AncestorType={x:Type StackPanel}}}"
               Content="{Binding DataContext.ToogleContent, RelativeSource={RelativeSource AncestorType={x:Type StackPanel}}}" />

具有依赖属性的解决方案

您不应直接在控件模板中使用属性路径上的绑定。此绑定将始终依赖于确切的属性名称TextOFF和TextON当前数据上下文，而不是使用以下选项之一：

• 创建一个从On和Off文本派生的自定义控件ToggleButton并添加依赖属性。
• 为On和Off文本创建自定义附加属性。

在这两种情况下，您都可以从外部绑定文本。我更喜欢第一个选项，因为您的切换按钮可能具有其他可以公开的属性，这些属性适合其特殊行为或外观。

public class SwitchButton : ToggleButton
{
   static SwitchButton()
   {
      DefaultStyleKeyProperty.OverrideMetadata(typeof(SwitchButton),
         new FrameworkPropertyMetadata(typeof(SwitchButton)));
   }

   public static readonly DependencyProperty OffTextProperty = DependencyProperty.Register(
      nameof(OffText), typeof(string), typeof(SwitchButton));

   public static readonly DependencyProperty OnTextProperty = DependencyProperty.Register(
      nameof(OnText), typeof(string), typeof(SwitchButton));

   public string OffText
   {
      get => (string)GetValue(OffTextProperty);
      set => SetValue(OffTextProperty, value);
   }

   public string OnText
   {
      get => (string)GetValue(OnTextProperty);
      set => SetValue(OnTextProperty, value);
   }
}

现在，x:Key从模板中删除 并将类型更改为SwitchButton. 如果没有键，样式将是隐式的并SwitchButton自动应用于范围内的所有控件。另请注意，绑定现在TemplateBinding是绑定到SwitchButton.

<Style TargetType="{x:Type YourProject:SwitchButton}">
   <Setter Property="IsChecked"
           Value="False" />
   <Setter Property="HorizontalAlignment"
           Value="Left" />
   <Setter Property="VerticalAlignment"
           Value="Center" />
   <Setter Property="Template">

      <Setter.Value>
         <ControlTemplate TargetType="{x:Type YourProject:SwitchButton}">
            <Grid x:Name="toggleSwitch">
               <Border x:Name="Border"
                       CornerRadius="10"
                       Background="#C2283B"
                       Width="90"
                       Height="25">
                  <Border.Effect>
                     <DropShadowEffect ShadowDepth="0.6"
                                       Direction="0"
                                       Opacity="0.3" />
                  </Border.Effect>
                  <Ellipse x:Name="Ellipse"
                           Fill="#FFFFFFFF"
                           Stretch="Uniform"
                           Margin="2 2 2 1"
                           Stroke="Gray"
                           StrokeThickness="0.2"
                           HorizontalAlignment="Left"
                           Width="22">
                     <Ellipse.Effect>
                        <DropShadowEffect BlurRadius="10"
                                          ShadowDepth="1"
                                          Opacity="0.3"
                                          Direction="260" />
                     </Ellipse.Effect>
                  </Ellipse>
               </Border>

               <TextBlock x:Name="txtOff"
                          Text="{TemplateBinding OffText}"
                          Margin="0 0 40 0"
                          VerticalAlignment="Center"
                          FontWeight="DemiBold"
                          HorizontalAlignment="Right"
                          Foreground="White"
                          FontSize="10" />
               <TextBlock Opacity="0"
                          x:Name="txtOn"
                          Text="{TemplateBinding OnText}"
                          Margin="40 0 0 0"
                          VerticalAlignment="Center"
                          FontWeight="DemiBold"
                          Foreground="White"
                          HorizontalAlignment="Left"
                          FontSize="10" />
            </Grid>

            <ControlTemplate.Triggers>
               <Trigger Property="ToggleButton.IsChecked"
                        Value="True">
                  <Trigger.EnterActions>

                     <BeginStoryboard>

                        <Storyboard>
                           <ColorAnimation Storyboard.TargetName="Border"
                                           Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                           To="#34A543"
                                           Duration="0:0:0.1" />
                           <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                               Storyboard.TargetProperty="Margin"
                                               To="60 2 2 1"
                                               Duration="0:0:0.1" />
                           <DoubleAnimation Storyboard.TargetName="txtOff"
                                            Storyboard.TargetProperty="(TextBlock.Opacity)"
                                            From="1.0"
                                            To="0.0"
                                            Duration="0:0:0:0.1" />
                           <DoubleAnimation Storyboard.TargetName="txtOn"
                                            Storyboard.TargetProperty="(TextBlock.Opacity)"
                                            From="0.0"
                                            To="1.0"
                                            Duration="0:0:0:0.1" />
                        </Storyboard>
                     </BeginStoryboard>
                  </Trigger.EnterActions>
                  <!--  some out fading  -->
                  <Trigger.ExitActions>
                     <BeginStoryboard>
                        <Storyboard>
                           <ColorAnimation Storyboard.TargetName="Border"
                                           Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                           To="#C2283B"
                                           Duration="0:0:0.1" />
                           <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                               Storyboard.TargetProperty="Margin"
                                               To="2 2 2 1"
                                               Duration="0:0:0.1" />
                           <DoubleAnimation Storyboard.TargetName="txtOff"
                                            Storyboard.TargetProperty="(TextBlock.Opacity)"
                                            From="0"
                                            To="1.0"
                                            Duration="0:0:0:0.1" />
                           <DoubleAnimation Storyboard.TargetName="txtOn"
                                            Storyboard.TargetProperty="(TextBlock.Opacity)"
                                            From="1.0"
                                            To="0.0"
                                            Duration="0:0:0:0.1" />
                        </Storyboard>
                     </BeginStoryboard>
                  </Trigger.ExitActions>
                  <Setter Property="Foreground"
                          Value="{DynamicResource IdealForegroundColorBrush}" />
               </Trigger>
               <Trigger Property="IsMouseOver"
                        Value="False">
               </Trigger>

               <Trigger Property="IsEnabled"
                        Value="False">
                  <Setter Property="Foreground"
                          Value="{DynamicResource GrayBrush7}" />
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
   <Setter Property="VerticalContentAlignment"
           Value="Center" />
</Style>

这允许您从外部绑定Off和On文本。在您的情况下，您需要使用RelativeSource绑定来访问.TextOFFTextONMainWindow

<YourProject:SwitchButton  x:Name="isActive"
                           VerticalAlignment="Center"
                           IsEnabled="False"
                           HorizontalAlignment="Right"
                           Width="auto"
                           FlowDirection="RightToLeft"
                           IsChecked="{Binding empisActive}"
                           Content="{Binding ToogleContent}"
                           OffText="{Binding TextOFF, RelativeSource={RelativeSource AncestorType={x:Type YourProject:MainWindow}}}"
                           OnText="{Binding TextON, RelativeSource={RelativeSource AncestorType={x:Type YourProject:MainWindow}}}"/>