動作ToggleButtonとCustomControlのポップアップ

Question

私はwpfに次のxamlコードを持っています。これは、私が期待しているようにDropdownButtonを動作させます。

<ToggleButton Content="Test" 
        VerticalAlignment="Center" 
        Focusable="False" 
        IsChecked="{Binding IsOpen, ElementName=Popup, Mode=TwoWay}" 
        Height="25" 
        Width="20" 
        x:Name="btn"> 
     <ToggleButton.Style> 
      <Style TargetType="{x:Type ToggleButton}"> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsOpen, ElementName=Popup}" Value="True"> 
         <Setter Property="IsHitTestVisible" Value="False" /> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </ToggleButton.Style> 
    </ToggleButton> 

    <Popup Placement="Bottom" 
      PlacementTarget="{Binding ElementName=btn}" 
      x:Name="Popup" 
      StaysOpen="False"> 
     <TextBlock Background="AliceBlue">Bla</TextBlock> 
    </Popup> 

これを数回使用して以来、私はカスタムコントロールを作成したかったのです。

これまでのところ、クラスは次のようになります。

<Style x:Key="ButtonFocusVisual"> 
    <Setter Property="Control.Template"> 
     <Setter.Value> 
      <ControlTemplate> 
       <Rectangle StrokeDashArray="1 2" StrokeThickness="1" 
          Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" 
          SnapsToDevicePixels="true" Margin="2"/> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> 
    <GradientStop Color="#F3F3F3" Offset="0"/> 
    <GradientStop Color="#EBEBEB" Offset="0.5"/> 
    <GradientStop Color="#DDDDDD" Offset="0.5"/> 
    <GradientStop Color="#CDCDCD" Offset="1"/> 
</LinearGradientBrush> 
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/> 

<Style TargetType="{x:Type local:CustomDropdownButton}"> 
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> 
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> 
    <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Padding" Value="1"/> 
    <Setter Property="ClickMode" Value="Press"/> 
    <Setter Property="Focusable" Value="False"/> 
    <Setter Property="IsChecked" Value="{Binding IsOpen, ElementName=Popup, Mode=TwoWay}"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:CustomDropdownButton}"> 

       <themes:ButtonChrome x:Name="Chrome" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            Background="{TemplateBinding Background}" 
            RenderMouseOver="{TemplateBinding IsMouseOver}" 
            SnapsToDevicePixels="true"> 
        <StackPanel Orientation="Horizontal" 
           IsHitTestVisible="True"> 
         <ContentPresenter Content="{TemplateBinding Content}" 
              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
              Margin="5,0,0,0"/> 
         <Path x:Name="ArrowPath" 
           Margin="7,3,3,2" 
           Fill="Gray" 
           Stroke="Gray" 
           StrokeThickness="1" 
           StrokeStartLineCap="Round" 
           StrokeEndLineCap="Round" 
           Stretch="Uniform" 
           VerticalAlignment="Center" 
           HorizontalAlignment="Center" 
           RenderTransformOrigin=".5,.5" 
           Data="M0,0 L2,0 L4,2 L5,3 L6,2 L8,0 L10,0 L8,2 L5,7 L2,2 z"> 
          <Path.RenderTransform> 
           <RotateTransform Angle="-90"/> 
          </Path.RenderTransform> 
         </Path> 

         <Popup Placement="Bottom" 
           x:Name="Popup" 
           StaysOpen="False" 
           Child="{TemplateBinding DropdownContent}"/> 
        </StackPanel> 
       </themes:ButtonChrome> 

       <ControlTemplate.Triggers> 
        <DataTrigger Binding="{Binding IsOpen, ElementName=Popup}" Value="True"> 
         <Setter Property="IsHitTestVisible" Value="False" /> 
        </DataTrigger> 
        <Trigger Property="IsKeyboardFocused" Value="true"> 
         <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="#ADADAD"/> 
        </Trigger> 
        <Trigger Property="IsChecked" Value="False"> 
         <Trigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="ArrowPath" 
                Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)" 
                To="-90" 
                Duration="0:0:0.2"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
         <Trigger.ExitActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="ArrowPath" 
                Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)" 
                To="0" 
                Duration="0:0:0.2"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.ExitActions> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

ポップアップボタンのコード例はうまく働いていた：

public class CustomDropdownButton : ToggleButton 
{ 
    public static readonly DependencyProperty DropdownContentProperty = DependencyProperty.Register("DropdownContent", typeof(UIElement), typeof(CustomDropdownButton)); 

    static CustomDropdownButton() 
    { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomDropdownButton), new FrameworkPropertyMetadata(typeof(CustomDropdownButton))); 
    } 

    public UIElement DropdownContent 
    { 
     get 
     { 
      return (UIElement)GetValue(DropdownContentProperty); 
     } 
     set 
     { 
      SetValue(DropdownContentProperty, value); 
     } 
    } 
} 

と私はスタイルを編集し、それがこのようになります。 私は、Setterを使用してポップアップのIsOpenプロパティをToggleButtonのIsCheckedプロパティにバインドすると同じ効果が得られると考えました。

追加する必要があるトリガーの動作がありません。なぜそれが開かないのか分かりません。

にisCheckedとClickModeセッターを除去することによって、それを修正

---

は、ないTemplateBindingのではなく提案RelativeSourceが双方向に設定されたモードで、にisCheckedへの結合をポップアップからのIsOpenプロパティを結合しました。 StaysOpenとDataTriggerは保持されました。

ListViewのListViewItemに余白が設定されているため、ポップアップがまだ閉じています。コンテンツホルダのためのパディング（常にクリック可能）またはマージン（何も打たない）を設定します。私にとっては、ListView内のチェックボックスでした。

Answer 1

バインドコントロールのIsCheckedプロパティにテンプレート内PopupのIsOpenプロパティ：

<Popup Placement="Bottom" 
     x:Name="Popup" 
     StaysOpen="False" 
     IsOpen="{Binding Path=IsChecked, RelativeSource={RelativeSource AncestorType=local:CustomDropdownButton}, Mode=TwoWay}" 
     Child="{TemplateBinding DropdownContent}"/> 

これは動作しません。

<Setter Property="IsChecked" Value="{Binding IsOpen, ElementName=Popup, Mode=TwoWay}"/>