Я создал настраиваемую кнопку переключения и настраиваемый расширитель. Кажется, все работает нормально, я не могу просматривать элементы управления, которые я добавил в расширитель.

Вот мой собственный ресурс:

<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>

Вот изображение, я не вижу ярлыка и кнопки, которые я добавил на расширитель:

http://i.imgur.com/hvI7cs3.png

1
Stalfos 18 Дек 2013 в 19:30

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>
1
Natxo 18 Дек 2013 в 20:23
Думаю, мы на правильном пути. Теперь я могу выбрать элементы управления, которые я добавил в конструктор, что я раньше не мог сделать, однако в конструкторе ничего не отображается и ничего не отображается при запуске программы, оно просто пустое. Вот изображение i.imgur.com/iMa7GV1.png
 – 
Stalfos
18 Дек 2013 в 20:34
Изменить: я думаю, что нашел проблему. Я изменил размер фактического элемента управления расширителем в файле xaml главного окна, и теперь отображаются кнопки. Спасибо за вашу помощь.
 – 
Stalfos
18 Дек 2013 в 20:38
Да, я собирался прокомментировать его размер. Рад помочь.
 – 
Natxo
18 Дек 2013 в 20:41