Hello, I would like to know how to solve this problem. There is an element Expander , which has its own standard style. Using Data or Path makes it possible to change the appearance of the window and the button itself to activate this drop-down list when using Template . How can this be done and also so that the drop-down list is exactly under the button? For example: call the window in Skype Данные о качестве связи (volume, etc.).

enter image description here

Note: I know how to use Data and Path.

  • Do you need a Popup (which has a separate window ), or an inline element like Expander? - VladD
  • Still, an additional Popup window that will be displayed on top of another window in which it is located, closing other elements, and not an inline element. So that when pressed, a smooth opening takes place, as in Expander , if it can of course be adjusted using Duration . Also, the smooth opening direction (from top to bottom, from bottom to top, etc.), like in Expander or from an angle to another corner . How is this possible to do? - Glayder

1 answer 1

If necessary, it will be possible to finish the painting myself, since the Path precisely drawn along the contour.

 <Window.Resources> <Style x:Key="PopupToggleButton" TargetType="{x:Type ToggleButton}"> <Style.Setters> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="MinHeight" Value="32"/> <Setter Property="MinWidth" Value="32"/> <Setter Property="MaxHeight" Value="32"/> <Setter Property="MaxWidth" Value="32"/> <Setter Property="Margin" Value="0 5 0 0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Grid> <Ellipse x:Name="ellipse_popup"> <Ellipse.Fill> <SolidColorBrush Color="#FF8B8B8B"/> </Ellipse.Fill> </Ellipse> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="ellipse_popup" Property="Stroke" Value="Black"/> <Setter TargetName="ellipse_popup" Property="StrokeThickness" Value="1"/> </Trigger> <Trigger Property="ButtonBase.IsPressed" Value="True"> <Setter TargetName="ellipse_popup" Property="Stroke" Value="#FF343434"/> <Setter TargetName="ellipse_popup" Property="Fill" Value="#FFC7C7C7"/> <Setter TargetName="ellipse_popup" Property="StrokeThickness" Value="2"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style.Setters> </Style> <Style x:Key="Popup_style" TargetType="ContentControl"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ContentControl"> <Grid Width="180" Height="Auto" > <Path Panel.ZIndex="1" Stroke="Orange" StrokeThickness="0.02" Data="M11.3,0 L11.3,0 L168.5,0 A12,12 0 0 1 179.99,12 L179.99,78.5 A12,12 0 0 1 168.5,90 L11.3,90 A12,12 0 0 1 0,78.5 L0,12 A12,12 0 0 1 11.3,0 z "/> <Border Background="#FF646464" CornerRadius="12"> <StackPanel> <ContentPresenter Content="{TemplateBinding ContentControl.Content}" /> </StackPanel> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <ToggleButton x:Name="Popup_button" Margin="0 40 0 0" HorizontalAlignment="Center" Style="{StaticResource PopupToggleButton}"/> <Popup StaysOpen="True" IsOpen="{Binding IsChecked, ElementName=Popup_button, Mode=TwoWay}" PlacementTarget="{Binding ElementName=Popup_button}" AllowsTransparency="True" PopupAnimation="Slide" HorizontalOffset="-75" VerticalOffset="0"> <ContentControl Style="{DynamicResource Popup_style}"> <StackPanel Margin="5 10 5 5" > <Button Content="Click1" Width="120" Margin="0"/> <Button Content="Click2" Width="120" Margin="0 5 0 0"/> <Button Content="Click3" Width="120" Margin="0 5 0 0"/> </StackPanel> </ContentControl> </Popup> </Grid>