如何始终将PopUp放在WPF中的ToggleButton下 [英] How to always place PopUp under a ToggleButton in WPF
本文介绍了如何始终将PopUp放在WPF中的ToggleButton下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我单击弹出按钮时，我想在其下面放置一个弹出窗口.在此弹出窗口中，我想添加按钮和其他控件.但是，当我调整主窗口的大小时，如何确保弹出窗口始终位于切换按钮的下方.
我的XAML代码:
<ToggleButton
x:Name="userBtn"
Margin="610,25,378,0"
VerticalAlignment="Top"
Height="29"
Grid.Column="2"
>
<ToggleButton.Resources>
<BitmapImage x:Key="imgNormal" UriSource="/Resources/home.jpg"/>
<BitmapImage x:Key="imgHover" UriSource="/Resources/home_checked.jpg"/>
<BitmapImage x:Key="imgChecked" UriSource="/Resources/home_checked.jpg"/>
</ToggleButton.Resources>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton" >
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Width="150" Height="32">
<Image x:Name="PART_Image" Height="22" Width="22" RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" Margin="0,0,0,0" Source="{StaticResource imgNormal}"/>
<TextBlock x:Name="PART_TEXT" FontFamily="Arial" Foreground="#FFAFADAD" FontSize="13" HorizontalAlignment="Center" Text="{x:Static properties:Resources.BtnDashboard}" Margin="10,9,0,0"></TextBlock>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgChecked}"/>
<Setter TargetName="PART_TEXT" Property="Foreground" Value="#79B539" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgHover}"/>
<Setter TargetName="PART_TEXT" Property="Foreground" Value="#79B539" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="PART_Image" Property="Opacity" Value="0.6"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Popup Name="UserMenuPopUp" PopupAnimation="Fade" Width="280" Height="auto" Margin="20" AllowsTransparency="True" HorizontalAlignment="Left" Placement="bottom" PlacementTarget="{Binding ElementName=userBtn}" IsOpen="{Binding IsChecked, ElementName=Userbtn}" StaysOpen="false" >
<Border Margin="2,0,48,0" BorderThickness="1" Background="#EEEEEE" Height="105">
<Grid>
</Grid>
</Border>
</Popup>
用于单击切换按钮的C#代码:
private void UserBtn_Click(object sender, RoutedEventArgs e)
{
// Get location, adn sender
var element = (System.Windows.Controls.Primitives.ToggleButton)sender;
var location = element.PointToScreen(new Point(0, 0));
// Set popup location
UserMenuPopUp.HorizontalOffset = (location.X);
UserMenuPopUp.VerticalOffset = (location.Y);
UserMenuPopUp.IsOpen = true;
}
解决方案
使用Popup的Placement和PlacementTarget属性:)
<Popup Placement="Bottom" PlacementTarget="{Binding ElementName=myToggleButton}" IsOpen="{Binding IsChecked, ElementName=Userbtn}" StaysOpen="False" />
这里要注意的是，如果在打开Popup时移动了窗口，则窗口不会随之移动.您可以将IsOpen属性绑定到ToggleButton的IsChecked上，然后设置StaysOpen = False.这样做，弹出窗口将自动关闭，将按钮切换回:)，如果要执行此操作，您也将不需要C#代码:)
希望它会有所帮助:)
I want to place a popup under a togglebutton when I click on it. In this popup I want to add button and other controls. But how can I make sure that the popup window always will be under my togglebutton also when I resize my mian window.
My XAML code:
<ToggleButton
x:Name="userBtn"
Margin="610,25,378,0"
VerticalAlignment="Top"
Height="29"
Grid.Column="2"
>
<ToggleButton.Resources>
<BitmapImage x:Key="imgNormal" UriSource="/Resources/home.jpg"/>
<BitmapImage x:Key="imgHover" UriSource="/Resources/home_checked.jpg"/>
<BitmapImage x:Key="imgChecked" UriSource="/Resources/home_checked.jpg"/>
</ToggleButton.Resources>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton" >
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Width="150" Height="32">
<Image x:Name="PART_Image" Height="22" Width="22" RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" Margin="0,0,0,0" Source="{StaticResource imgNormal}"/>
<TextBlock x:Name="PART_TEXT" FontFamily="Arial" Foreground="#FFAFADAD" FontSize="13" HorizontalAlignment="Center" Text="{x:Static properties:Resources.BtnDashboard}" Margin="10,9,0,0"></TextBlock>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgChecked}"/>
<Setter TargetName="PART_TEXT" Property="Foreground" Value="#79B539" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgHover}"/>
<Setter TargetName="PART_TEXT" Property="Foreground" Value="#79B539" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="PART_Image" Property="Opacity" Value="0.6"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Popup Name="UserMenuPopUp" PopupAnimation="Fade" Width="280" Height="auto" Margin="20" AllowsTransparency="True" HorizontalAlignment="Left" Placement="bottom" PlacementTarget="{Binding ElementName=userBtn}" IsOpen="{Binding IsChecked, ElementName=Userbtn}" StaysOpen="false" >
<Border Margin="2,0,48,0" BorderThickness="1" Background="#EEEEEE" Height="105">
<Grid>
</Grid>
</Border>
</Popup>
C# code for click on togglebutton:
private void UserBtn_Click(object sender, RoutedEventArgs e)
{
// Get location, adn sender
var element = (System.Windows.Controls.Primitives.ToggleButton)sender;
var location = element.PointToScreen(new Point(0, 0));
// Set popup location
UserMenuPopUp.HorizontalOffset = (location.X);
UserMenuPopUp.VerticalOffset = (location.Y);
UserMenuPopUp.IsOpen = true;
}
解决方案
Use Placement and PlacementTarget properties of the Popup :)
<Popup Placement="Bottom" PlacementTarget="{Binding ElementName=myToggleButton}" IsOpen="{Binding IsChecked, ElementName=Userbtn}" StaysOpen="False" />
The thing to note here is that, if the window is moved when Popup is open, it wont move along.. What you could do is Bind the IsOpen property to ToggleButton's IsChecked and set StaysOpen=False. Doing that, the Popup will close automatically, toggling the button back :) , also you wont be needing the C# code if you are to do this :)
OR here is a link to another SO post if it should stay open whatever the case be : Move a WPF Popup
Hope it helps :)
这篇关于如何始终将PopUp放在WPF中的ToggleButton下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
