Я использую собственный стиль для моего тумблера. Стиль применяется, работает нормально и показывает ON или OFF. Проблема в том, что когда я добавляю тумблер в 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>
MainWindow.xaml.cs
public MainWindow(){
InitializeComponent();
TextOFF = (string)Application.Current.Resources["NotActive"];
TextON = (string)Application.Current.Resources["IsActive"];
}
// ...
Я пытаюсь отобразить текст в колонке тумблера, как мне это сделать?
Примечание. Это работает, если тумблер не создан внутри шаблона данных.
Кнопка-переключатель должна содержать текст (ON или OFF).