How would I be able to have a popup which has a horizontal alignment to center, but still keep the placement to be below the parent item like this:
What I Have:
Code:
<ToggleButton Name="button" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<TextBlock>settings</TextBlock>
<!--<materialDesign:PackIcon Kind="PackageVariantClosed" Foreground="Black" Height="24" Width="24"/>-->
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup Placement="Bottom" PlacementTarget="{Binding ElementName=button}" IsOpen="{Binding IsChecked, ElementName=button}" StaysOpen="False">
<Border Background="#222" Height="150" Width="250">
<TextBlock>I'm the popup</TextBlock>
</Border>
</Popup>
What I want:
You can use the HorizontalOffset property of the popup. If you know the width of the toggle button you can set a number in XAML:
<Popup Placement="Bottom" PlacementTarget="{Binding ElementName=button}"
HorizontalOffset="-100"
IsOpen="{Binding IsChecked, ElementName=button}" StaysOpen="False">
If you want a more generic approach, in the code behind you can calculate the exact offset that is needed:
popup.HorizontalOffset = -125 + button.ActualWidth / 2;
Related
I have the following Control template in my app.xaml: (it is in a template setter in a style, so there is no key)
<ControlTemplate TargetType="{x:Type vm:State}">
<Grid Width="100" Height="60" >
<Border Margin="4"
IsHitTestVisible="{Binding ElementName=Radio_Edit02, Path=IsChecked}"
Padding="4"
BorderBrush="White"
BorderThickness="2"
CornerRadius="5">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{Binding ItemName, RelativeSource={RelativeSource TemplatedParent}}"/>
</Border>
<Grid Margin="3" Background="Transparent">
<local:Anchor Width="6" Height="6" HorizontalAlignment="Center" VerticalAlignment="Top" Background="Red" Visibility="{Binding IsChecked, ElementName=Radio_Edit03, Converter={StaticResource bool2vizibility}}"/>
<local:Anchor Width="6" Height="6" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Red" Visibility="{Binding IsChecked, ElementName=Radio_Edit03, Converter={StaticResource bool2vizibility}}"/>
<local:Anchor Width="6" Height="6" HorizontalAlignment="Left" VerticalAlignment="Center" Background="Red" Visibility="{Binding IsChecked, ElementName=Radio_Edit03, Converter={StaticResource bool2vizibility}}"/>
<local:Anchor Width="6" Height="6" HorizontalAlignment="Center" VerticalAlignment="Bottom" Background="Red" Visibility="{Binding IsChecked, ElementName=Radio_Edit03, Converter={StaticResource bool2vizibility}}"/>
</Grid>
</Grid>
</ControlTemplate>
State derives from thumb
public class State : Thumb, INotifyPropertyChanged
Anchor derives from UserControl
public class Anchor : UserControl, INotifyPropertyChanged
I want to capture a click of the State at one point in the app and of the Anchor in another point of the app.
I want to control when by the two radiobuttons, Radio_Edit02 & Radio_Edit03
when Radio_Edit02 is selected I want to capture the click on the border
when Radio_Edit03 is selected I want to capture the click on the anchor.
I keep getting the click event on the State and cannot get a click on the Anchor.
I tried adding IsHitTestVisible="{Binding ElementName=Radio_Edit03, Path=IsChecked}" to the anchor
but no luck
I tried the following assignement of event handlers in Anchor but neither worked
public Anchor() //constructor
{
//this//this.MouseLeftButtonUp += onAnchorSelect;
//this.PreviewMouseLeftButtonUp += onAnchorSelect;
}
signature for onAnchorSelect is
public void onAnchorSelect(object sender, MouseButtonEventArgs e)
How can I capture a click on the Anchor so that e.Source is the anchor element
thanks
I have Custom control which uses control template as shown in below code block. I need to show popup when user left clicks on the control. Once he/she clicks outside the pop up, it should close.
With MouseLeftButtonUp, the pop up is displayed however stays open on clicking outside the popup.
Please note I have set focus on on popup listbox element as soon as pop opens using behaviours:Focus
<ControlTemplate x:Key="ControlWithPopup" TargetType="local:CustomizedControl">
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<ei:ChangePropertyAction
PropertyName="IsDropDownOpen"
TargetObject="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}"
Value="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
<Popup
x:Name="Popup1"
Width="100"
MinWidth="80"
MaxHeight="300"
AllowsTransparency="true"
IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}"
Placement="Center"
PlacementTarget="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}"
PopupAnimation="Fade"
StaysOpen="False">
<Border
Background="{DynamicResource SomeBackgroundBrush}"
BorderBrush="{DynamicResource SomeBorderBrush}"
BorderThickness="1"
TextElement.Foreground="{DynamicResource SomeFontBrush}">
<ListBox
x:Name="List1"
ItemTemplate="{TemplateBinding DropDownTemplate}"
ItemsSource="{Binding Path=ListSource, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ScrollViewer.CanContentScroll="False"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectedItem="{Binding Path=SelectedItem, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}"
Style="{DynamicResource ListBoxNormalStyle}"
VirtualizingPanel.IsVirtualizing="False">
</ListBox>
</Border>
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding IsOpen, ElementName=Popup1}" Value="True">
<behaviours:ScrollIntoCenterView TargetObject="{Binding ElementName=List1}" />
<behaviours:Focus TargetObject="{Binding ElementName=List1}" />
</ei:DataTrigger>
</i:Interaction.Triggers>
</Popup>
<Border
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
BorderThickness="1">
<TextBlock
x:Name="Presenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="11"
FontWeight="ExtraBold"
Text="{Binding SelectedValue}" />
</Border>
</Grid>
</Border>
</ControlTemplate>
Note -
- Also note, i dont want to set StayOpen to True due to some reason outside the scope of the problem. I want to achieve it using StayOpen set to False
I have the following problem: I overlay 2 controls over one another and want a single border to surround them both. I thought I could control the ZIndex of the border over each control and give them a low ZIndex: 2. Then give the controls a higher ZIndex (4 and 5). The following xaml as a UserControl is what I'm referring to:
<Canvas>
<Border BorderBrush="Black" BorderThickness="4" Canvas.ZIndex="2" Canvas.Left="50" Canvas.Top="30">
<Rectangle Width="200" Height="20" Fill="Aqua" Canvas.ZIndex="5"/>
</Border>
<Border BorderBrush="Black" BorderThickness="4" Canvas.ZIndex="2" Canvas.Left="150" Canvas.Top="00">
<Rectangle Width="50" Height="200" Fill="Yellow" Canvas.ZIndex="5"/>
</Border>
</Canvas>
The result looks like:
But I desire is the following image but with the border with red-X removed:
Can anyone recommend a way to do this ? The Border ZIndex method is not working.
Thanks!
ZIndex is not working cause Rectangles are not childs of Canvas. So you can fix it by placing them outside of borders and adjusting its Heights, Widths and Canvas.Left, Canvas.Top properties. So the example looks like this.
<Canvas>
<Border BorderBrush="Black" BorderThickness="4" Canvas.ZIndex="2"
Canvas.Left="46" Canvas.Top="26"
Width="208" Height="28">
</Border>
<Rectangle Width="200" Height="20" Fill="Aqua" Canvas.ZIndex="5"
Canvas.Left="50" Canvas.Top="30" />
<Border BorderBrush="Black" Height="208" Width="58" BorderThickness="4"
Canvas.ZIndex="2" Canvas.Left="146" Canvas.Top="00">
</Border>
<Rectangle Canvas.Left="150" Canvas.Top="4" Width="50" Height="200" Fill="Yellow"
Canvas.ZIndex="5"/>
</Canvas>
I am coding to popup a Text when MouseOver on ToggleButton. I got it too, but the real problem is that popped Text is not remains constant i.e., it continuously shaking on the ToggleButton. One more thing is that popped Text is appeared on the ToggleButton itself but it should be beneath of it. How can i get rid of this one?
Here is my Code looks
<ToggleButton x:Name="btn" Width="20" Height="15">
<Image Source="../Images/flag_orange.ico"/>
</ToggleButton>
<Popup x:Name="popUp" IsOpen="{Binding IsChecked, ElementName=btn, Mode=TwoWay}"
StaysOpen="False" PlacementTarget="{Binding ElementName=btn}"
Placement="Bottom" PopupAnimation="Slide" HorizontalOffset="-5"
VerticalOffset="3">
<Border Background="DarkGray">
<TextBox Text="Its a place holder for user notes" x:Name="tbText"/>
</Border>
</Popup>
<TextBlock x:Name="tbTextBlock"
Visibility="{Binding Path=IsMouseOver,ElementName=btn,Mode=OneWay,
Converter={StaticResource BoolToVisibilityConverter}}"
Text="{Binding ElementName=tbText, Path=Text, Mode=TwoWay}" />
use IsHitTestVisible="False" on your TextBlock. The Mouseover is catched by the Textblock yet, so your mouse is not over the ToggleButton when the TextBlock appears.
To get the TextBlock beneath the ToggleButton use either a Margin="0,15,0,0" or a StackPanel to get those controls in order:
<StackPanel>
<ToggleButton x:Name="btn" Width="20" Height="15">
<Image Source="../Images/flag_orange.ico"/>
</ToggleButton>
<Popup x:Name="popUp" IsOpen="{Binding IsChecked, ElementName=btn, Mode=TwoWay}"
StaysOpen="False" PlacementTarget="{Binding ElementName=btn}"
Placement="Bottom" PopupAnimation="Slide" HorizontalOffset="-5"
VerticalOffset="3">
<Border Background="DarkGray">
<TextBox Text="Its a place holder for user notes" x:Name="tbText"/>
</Border>
</Popup>
<TextBlock x:Name="tbTextBlock"
IsHitTestVisible="False"
Visibility="{Binding Path=IsMouseOver,ElementName=btn,Mode=OneWay,
Converter={StaticResource BoolToVisibilityConverter}}"
Text="{Binding ElementName=tbText, Path=Text, Mode=TwoWay}" />
</StackPanel>
I'm making my first foray into WPF - I have a simple form with a popup defined for inline help. I'm using rounded corners, and for some reason a black background is bleeding through around the corners. I don't understand which element is causing the problem.
alt text http://www.awbrey.net/rounded.jpg
I assume it's something blindingly obvious which I'm just not seeing. Here's the XAML I'm using:
<Window x:Class="Consent.Client.SubjectNumberEntry"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" FontSize="24"
Title="SubjectNumberEntry" WindowStyle="None" WindowState="Maximized"
xmlns:h="clr-namespace:Consent.Client" KeyDown="windowOuter_KeyDown" Background="White" Name="windowOuter" AllowsTransparency="true" Loaded="Window_Loaded">
<StackPanel Height="400" DockPanel.Dock="Top" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10">
<StackPanel Height="60" Orientation="Horizontal" VerticalAlignment="Center">
<TextBox Name="txtSubjectNumber" Margin="10" Width="400" KeyDown="txtSubjectNumber_KeyDown" h:HelpProvider.HelpString="Enter the subject identifier, or scan their wristband">
<TextBox.ToolTip>This is a textbox</TextBox.ToolTip>
</TextBox>
<Button Name="btnEnter" Margin="10" Width="100" Click="btnEnter_Click">Enter</Button>
<Button Width="50" Name="btnHelp" Margin="10" Click="btnHelp_Click">?</Button>
<Button Width="50" Name="btnExit" Margin="10" Click="btnExit_Click">Exit</Button>
</StackPanel>
<Label Name="lblValue" Margin="10"></Label>
<Popup Placement="Bottom" HorizontalAlignment="Center" VerticalOffset="10" MouseDown="popHelp_MouseDown" PopupAnimation="Fade" Name="popHelp" PlacementTarget="{Binding ElementName=txtSubjectNumber}">
<Border Padding="10" Margin="10" BorderBrush="CornflowerBlue" BorderThickness="1" CornerRadius="10" Background="CornflowerBlue">
<TextBlock FontSize="12" Background="CornflowerBlue">This is the content of the help box.</TextBlock>
</Border>
</Popup>
</StackPanel>
</Window>
I think it is the Popup that is causing the problem. Try setting AllowsTransparency to True on the popup.
Popup.AllowsTransparency
When set to False, any transparent colors are "merged" with black.
You can also wrap the popup in a border that has rounded corners. This is useful if you can't change the AllowsTransparency of the popup.
Something like this:
<Border CornerRadius="10">
<Popup Placement="Bottom" HorizontalAlignment="Center" VerticalOffset="10" MouseDown="popHelp_MouseDown" PopupAnimation="Fade" Name="popHelp" PlacementTarget="{Binding ElementName=txtSubjectNumber}">
<Border Padding="10" Margin="10" BorderBrush="CornflowerBlue" BorderThickness="1" CornerRadius="10" Background="CornflowerBlue">
<TextBlock FontSize="12" Background="CornflowerBlue">This is the content of the help box.</TextBlock>
</Border>
</Popup>
</Border>