WPF Expander Шаблонирование - Отображение контента выше ToggleButton

Question

Я собираюсь создать новый элемент управления Expander (обучения) цели путем создания различных шаблонов, но не могу понять, что я делаю неправильно ...

ToggleButtonTemplate:

<ToggleButton> 
    <ToggleButton.Template> 
     <ControlTemplate TargetType="ToggleButton"> 
      <Border x:Name="eBB" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
       <Grid> 
        <Path x:Name="Sign" Data="M 0,10 L 7.5,2.5 L 15, 10" Stroke="Black" Width="15"> 
         <Path.RenderTransform> 
          <RotateTransform Angle="0"/> 
         </Path.RenderTransform> 
        </Path> 
       </Grid> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsChecked" Value="True"> 
        <Setter Property="Data" TargetName="Sign" Value="M 0,2.5 L 7.5,10 L 15,2.5"/> 
       </Trigger> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Stroke" Value="#222" TargetName="Sign"/> 
        <Setter Property="Background" Value="#666" TargetName="eBB"/> 
       </Trigger> 
       <Trigger Property="IsPressed" Value="True"> 
        <Setter Property="Stroke" Value="#FF003366" TargetName="Sign"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </ToggleButton.Template> 
</ToggleButton> 

Expander Шаблон:

<Expander> 
    <Expander.Template> 
     <ControlTemplate TargetType="Expander"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition x:Name="ContentRow" Height="*"/> 
        <RowDefinition Height="20"/> 
       </Grid.RowDefinitions> 
       <ContentPresenter Grid.Row="0" Visibility="Collapsed" Content="{TemplateBinding Content}"/> 
       <local:FullSizeExpanderToggleButton Grid.Row="1" /> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsExpanded" Value="True"> 
        <Setter Property="Visibility" Value="Visible"/> 
        <Setter Property="Height" Value="*" TargetName="ContentRow"/> 
       </Trigger> 
       <Trigger Property="IsExpanded" Value="False"> 
        <Setter Property="Height" Value="0" TargetName="ContentRow"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Expander.Template> 
</Expander> 

Теперь, когда я хочу добавить Expander в моем главном представлении

<custom:FullSizeExpander Width="300"> 
      <Button/> 
     </custom:FullSizeExpander> 

все пространство внутри элемента управления заполняется кнопкой (ToggleButton больше не виден).

Что я делаю неправильно?

Кроме того у меня есть некоторые вопросы, касающиеся этого вопроса:

1. Что "ContentSource =" Content "" делать? Для чего это? Что отличается от «Content =» {Templatebinding Content} «"?
2. Изменяется ли свойство Expander «IsExpanded» при изменении свойства ToggleButtons «IsPressed»? Что делать, если в расширителе нет Togglebutton?

Answer 1

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

<Expander> 
      <Rectangle Height="500" Width="500" Fill="Red"/> 
      <Expander.Template> 
       <ControlTemplate TargetType="Expander"> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="20"/> 
         </Grid.RowDefinitions> 
         <ContentPresenter Grid.Row="0" x:Name="ContentPresenter"/> 
         <ToggleButton Grid.Row="1" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsExpanded}"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsExpanded" Value="True"> 
          <Setter TargetName="ContentPresenter" Property="Visibility" Value="Visible"/> 
         </Trigger> 
         <Trigger Property="IsExpanded" Value="False"> 
          <Setter TargetName="ContentPresenter" Property="Visibility" Value="Collapsed"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Expander.Template> 
     </Expander> 

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

Затем я изменил первое RowDefinition как auto вместо *, так как вы хотите, чтобы расширитель фактически расширялся при открытии. (а не просто скрыть его содержимое в большой пустой области). Авто использует ровно столько места, сколько необходимо для содержимого в строке, поэтому, когда он рухнет, размер будет равен 0, а когда он будет расширен, автоматически станет 500, чтобы соответствовать прямоугольнику.

Третье, что я сделал, это удалить привязки из ContentPresenter. Как это бывает, шаблоны содержания Windows (как и во всем, что может иметь что-то еще внутри) будут автоматически искать первый тег ContentPresenter/ItemsPresenter внутри его шаблона и вставлять содержимое в него.

Как и в случае с переключателем (я сохранил его просто и оставил его как стандартную togglebutton), на самом деле это действительно необходимо для привязки. Что я сделал, так это ссылка на Relativesource Templatebinding на свойство IsExpanded. Togglebuttons имеет 2 основных состояния: «Проверено» и «Непроверено» (true/false), а Expanders имеют 2 основных состояния: «Expanded» и «Collapsed» (true/false). Так что, по сути, все, что я сделал, это сказать, что ToggleButton делится своим истинным/ложным состоянием проверки или снятия флажка с родителем, в котором он находится.

Полное связывание снова "{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}", которое по-английски по существу говорит: «Привязать к связанному источнику, а связанный источник - это родительский элемент, который вы в шаблоне, и привязать его к указанному шаблону; s« IsChecked » имущество.

Наконец-то я сменил триггеры, которые шли длинным путем, чтобы заставить ContentPresenter скрываться (пытаясь раздавить его, уменьшив размер Grid.Row он сидит), а вместо этого просто сказал ему спрятаться, когда расширитель «IsExpanded» (и благодаря нашей привязке, «IsChecked») ToggleButton установлен в значение «ложь», а наоборот, когда установлено значение «true».

.

Что касается других вопросов: 1) ContentSource используется, чтобы дать ContentPresenter псевдоним/альтернативное имя, и я сомневаюсь, что он вам понадобится в ближайшее время. Имя свойства - это своего рода вводящий в заблуждение, я предоставляю вам.

2) Как мы видели выше, нет - ToggleButton должен быть привязан к свойству IsExpanded с шаблоном для работы. Если вы должны были вынуть кнопку, Expander просто не работал бы до тех пор, пока вы не создали привязку или не сделали команду в коде, чтобы сообщить ей об открытии/закрытии.