我创建了一个自定义切换按钮和自定义扩展器。一切似乎都工作正常接受我无法查看我添加到扩展器的控件。
这是我的自定义资源:
<ControlTemplate
x:Key="CustomToggleButton"
TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image
x:Name="ExpanderImage"
Source="pack://application:,,,/Images/plus.png"
Visibility="Visible"
HorizontalAlignment="Left"
Grid.Column="0"/>
<Label
Grid.Column="1"
Width="160.5"
Height="45"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center">
<ContentPresenter/>
</Label>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ExpanderImage" Property="Source" Value="pack://application:,,,/Images/minus.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style
x:Key="CustomExpander"
TargetType="Expander">
<Setter Property="FontFamily" Value="Consolas"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Border
x:Name="ExpanderOuterBorder"
CornerRadius="0"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush x:Name="ExpanderBorderColor" Color="LightBlue"/>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush x:Name="ExpanderBackgroundColor" Color="White"/>
</Border.Background>
<Grid>
<ToggleButton
OverridesDefaultStyle="True"
Template="{StaticResource CustomToggleButton}"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Grid.Column="0">
<ToggleButton.Content>
<ContentPresenter ContentSource="Header"/>
</ToggleButton.Content>
</ToggleButton>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ExpanderBackgroundColor"
Storyboard.TargetProperty="Color"
To="LightBlue"
Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ExpanderBackgroundColor"
Storyboard.TargetProperty="Color"
To="White"
Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
这是主窗口中的代码,我使用了虚假控件:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="10"/>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollViewer
Grid.Row="1"
Grid.Column="0"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<Grid Background="White">
<Expander
VerticalAlignment="Top"
Height="45"
Width="205.5"
Style="{StaticResource CustomExpander}"
Header="Transactions"
IsExpanded="True">
<Grid>
<Label Foreground="Black">Testing</Label>
<Button
x:Name="AddTransactionButton"
Content="Add Transaction"
Height="100"
Width="75"/>
</Grid>
</Expander>
</Grid>
</ScrollViewer>
<GridSplitter
Grid.Row="1"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Width="2"/>
</Grid>
这是图片,我无法看到我添加到扩展器的标签和按钮:
答案 0 :(得分:1)
“CustomExpander”中的模板不完整。您没有为实际内容放置ContentPresenter
,也没有为触发器控制它。请看一下这个并注意带有“ContentRow”RowDefinition
且Height =“0”的新网格以及用于扩展它的新触发器:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Name="ContentRow" Height="0"/>
</Grid.RowDefinitions>
<Border x:Name="ExpanderOuterBorder"
CornerRadius="0"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush x:Name="ExpanderBorderColor" Color="LightBlue"/>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush x:Name="ExpanderBackgroundColor" Color="White"/>
</Border.Background>
<Grid>
<ToggleButton
OverridesDefaultStyle="True"
Template="{StaticResource CustomToggleButton}"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Grid.Column="0">
<ToggleButton.Content>
<ContentPresenter ContentSource="Header"/>
</ToggleButton.Content>
</ToggleButton>
</Grid>
</Border>
<Border Name="Content"
Grid.Row="1">
<ContentPresenter/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ExpanderBackgroundColor"
Storyboard.TargetProperty="Color"
To="LightBlue"
Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ExpanderBackgroundColor"
Storyboard.TargetProperty="Color"
To="White"
Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content, Path=Height}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>