Скрытие стрелок для элемента управления WPF Expander

StackOverflow https://stackoverflow.com/questions/1070685

  •  21-08-2019
  •  | 
  •  

Вопрос

При использовании элемента управления WPF Expander он отображается с помощью клавиш со стрелками по умолчанию "Вверх" и "Вниз".Есть ли какой-нибудь способ скрыть эти стрелки вверх и вниз?

Обновить:

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

<ContentPresenter Content="{TemplateBinding Expander.Header}"></ContentPresenter>
            <ContentPresenter Content="{TemplateBinding Expander.Content}"></ContentPresenter>



<Expander Template="{StaticResource ExpanderControlTemplate}" IsExpanded="False" Cursor="Hand">             

                <Expander.Header>
                <Border Style="{StaticResource FeedTitleStyle}">
                <DockPanel Width="Auto">
                    <TextBlock DockPanel.Dock="Left" FontSize="16" Text="IronRuby in Action!" />                   
                </DockPanel>           

            </Border>                 
                </Expander.Header>
                <Expander.Content>                    
                    <TextBlock Text="This is the decriprion!" />
                </Expander.Content>

            </Expander>
Это было полезно?

Решение

К сожалению, ContentPresenter внутри ExpanderTemplate для заголовка находится в той же сетке, что и стрелка, поэтому простая установка HeaderTemplate нам не поможет.

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

alt text

Теперь, когда мы знаем фактическую компоновку расширителя, есть несколько способов его модификации.Создаем совершенно новую ControlTemplate для расширителя или получаем детали, которые мы хотим удалить, и удаляем / скрываем их.

Обновить:Разобрался с Blend, после создания шаблона для расширителя, в значительной степени просто требуется просмотреть и удалить Эллипс и Контур из каждого стиля ToggleButton.

<Style x:Key="ExpanderHeaderFocusVisual">
    <Setter Property="Control.Template">
    <Setter.Value>
        <ControlTemplate>
            <Border>
                <Rectangle SnapsToDevicePixels="true"
                           Margin="0"
                           Stroke="Black"
                           StrokeDashArray="1 2"
                           StrokeThickness="1" />
            </Border>
        </ControlTemplate>
    </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ExpanderDownHeaderStyle"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Padding="{TemplateBinding Padding}">
                    <Grid SnapsToDevicePixels="False"
                          Background="Transparent">
                        <ContentPresenter SnapsToDevicePixels="True"
                                          HorizontalAlignment="Left"
                                          VerticalAlignment="Center"
                                          RecognizesAccessKey="True" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ExpanderRightHeaderStyle"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Padding="{TemplateBinding Padding}">
                    <Grid SnapsToDevicePixels="False"
                          Background="Transparent">
                        <ContentPresenter SnapsToDevicePixels="True"
                                          HorizontalAlignment="Center"
                                          VerticalAlignment="Top"
                                          RecognizesAccessKey="True" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ExpanderUpHeaderStyle"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Padding="{TemplateBinding Padding}">
                    <Grid SnapsToDevicePixels="False"
                          Background="Transparent">
                        <ContentPresenter SnapsToDevicePixels="True"
                                          HorizontalAlignment="Left"
                                          VerticalAlignment="Center"
                                          RecognizesAccessKey="True" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ExpanderLeftHeaderStyle"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Padding="{TemplateBinding Padding}">
                    <Grid SnapsToDevicePixels="False"
                          Background="Transparent">
                        <ContentPresenter SnapsToDevicePixels="True"
                                          HorizontalAlignment="Center"
                                          VerticalAlignment="Top"
                                          RecognizesAccessKey="True" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ArrowlessExpanderTemplate"
       TargetType="{x:Type Expander}">
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="HorizontalContentAlignment"
            Value="Stretch" />
    <Setter Property="VerticalContentAlignment"
            Value="Stretch" />
    <Setter Property="BorderBrush"
            Value="Transparent" />
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <Border SnapsToDevicePixels="true"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="3">
                    <DockPanel>
                        <ToggleButton FontFamily="{TemplateBinding FontFamily}"
                                      FontSize="{TemplateBinding FontSize}"
                                      FontStretch="{TemplateBinding FontStretch}"
                                      FontStyle="{TemplateBinding FontStyle}"
                                      FontWeight="{TemplateBinding FontWeight}"
                                      Foreground="{TemplateBinding Foreground}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Padding="{TemplateBinding Padding}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                      FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}"
                                      Margin="1"
                                      MinHeight="0"
                                      MinWidth="0"
                                      x:Name="HeaderSite"
                                      Style="{StaticResource ExpanderDownHeaderStyle}"
                                      Content="{TemplateBinding Header}"
                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
                                      ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                      DockPanel.Dock="Top"
                                      IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
                        <ContentPresenter Focusable="false"
                                          Visibility="Collapsed"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"
                                          x:Name="ExpandSite"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          DockPanel.Dock="Bottom" />
                    </DockPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded"
                             Value="true">
                        <Setter Property="Visibility"
                                TargetName="ExpandSite"
                                Value="Visible" />
                    </Trigger>
                    <Trigger Property="ExpandDirection"
                             Value="Right">
                        <Setter Property="DockPanel.Dock"
                                TargetName="ExpandSite"
                                Value="Right" />
                        <Setter Property="DockPanel.Dock"
                                TargetName="HeaderSite"
                                Value="Left" />
                        <Setter Property="Style"
                                TargetName="HeaderSite"
                                Value="{StaticResource ExpanderRightHeaderStyle}" />
                    </Trigger>
                    <Trigger Property="ExpandDirection"
                             Value="Up">
                        <Setter Property="DockPanel.Dock"
                                TargetName="ExpandSite"
                                Value="Top" />
                        <Setter Property="DockPanel.Dock"
                                TargetName="HeaderSite"
                                Value="Bottom" />
                        <Setter Property="Style"
                                TargetName="HeaderSite"
                                Value="{StaticResource ExpanderUpHeaderStyle}" />
                    </Trigger>
                    <Trigger Property="ExpandDirection"
                             Value="Left">
                        <Setter Property="DockPanel.Dock"
                                TargetName="ExpandSite"
                                Value="Left" />
                        <Setter Property="DockPanel.Dock"
                                TargetName="HeaderSite"
                                Value="Right" />
                        <Setter Property="Style"
                                TargetName="HeaderSite"
                                Value="{StaticResource ExpanderLeftHeaderStyle}" />
                    </Trigger>
                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Кроме того, мы могли бы создать AttachedProperty и вместо этого свернуть части со стрелкой и кругом.

Вот наша прикрепленная собственность:

public class AttachedProperties
{
    #region HideExpanderArrow AttachedProperty

    [AttachedPropertyBrowsableForType(typeof(Expander))]
    public static bool GetHideExpanderArrow(DependencyObject obj)
    {
        return (bool)obj.GetValue(HideExpanderArrowProperty);
    }

    [AttachedPropertyBrowsableForType(typeof(Expander))]
    public static void SetHideExpanderArrow(DependencyObject obj, bool value)
    {
        obj.SetValue(HideExpanderArrowProperty, value);
    }

    // Using a DependencyProperty as the backing store for HideExpanderArrow.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty HideExpanderArrowProperty =
        DependencyProperty.RegisterAttached("HideExpanderArrow", typeof(bool), typeof(AttachedProperties), new UIPropertyMetadata(false, OnHideExpanderArrowChanged));

    private static void OnHideExpanderArrowChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        Expander expander = (Expander)o;

        if (expander.IsLoaded)
        {
            UpdateExpanderArrow(expander, (bool)e.NewValue);
        }
        else
        {
            expander.Loaded += new RoutedEventHandler((x, y) => UpdateExpanderArrow(expander, (bool)e.NewValue));
        }
    }

    private static void UpdateExpanderArrow(Expander expander, bool visible)
    {
        Grid headerGrid =
            VisualTreeHelper.GetChild(
                VisualTreeHelper.GetChild(
                        VisualTreeHelper.GetChild(
                            VisualTreeHelper.GetChild(
                                VisualTreeHelper.GetChild(
                                    expander,
                                    0),
                                0),
                            0),
                        0),
                    0) as Grid;

        headerGrid.Children[0].Visibility = visible ? Visibility.Collapsed : Visibility.Visible; // Hide or show the Ellipse
        headerGrid.Children[1].Visibility = visible ? Visibility.Collapsed : Visibility.Visible; // Hide or show the Arrow
        headerGrid.Children[2].SetValue(Grid.ColumnProperty, visible ? 0 : 1); // If the Arrow is not visible, then shift the Header Content to the first column.
        headerGrid.Children[2].SetValue(Grid.ColumnSpanProperty, visible ? 2 : 1); // If the Arrow is not visible, then set the Header Content to span both rows.
        headerGrid.Children[2].SetValue(ContentPresenter.MarginProperty, visible ? new Thickness(0) : new Thickness(4,0,0,0)); // If the Arrow is not visible, then remove the margin from the Content.
    } 

    #endregion
}

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

Чтобы использовать прикрепленное свойство, мы можем просто установить его для элемента в XAML:

<StackPanel>
    <Expander x:Name="uiExpander" 
              local:AttachedProperties.HideExpanderArrow="True">
        <Expander.Header>
            <Border>
                <DockPanel Width="Auto">
                    <TextBlock DockPanel.Dock="Left"
                               FontSize="16"
                               Text="IronRuby in Action!" />
                </DockPanel>
            </Border>
        </Expander.Header>
        <Expander.Content>
            <TextBlock Text="This is the decriprion!" />
        </Expander.Content>
    </Expander>

    <Button Content="Click to Show/Hide Expander Arrow"
            Click="Button_Click" />

</StackPanel>

И в коде:

void Button_Click(object sender, RoutedEventArgs e)
{
    uiExpander.SetValue(
        AttachedProperties.HideExpanderArrowProperty, 
        !(bool)uiExpander.GetValue(AttachedProperties.HideExpanderArrowProperty));
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top