WPF Nested Popup does not close - wpf

I have a window with an Image that shows a Popup from its MouseEnter event handler:
private void theImage_MouseEnter(object sender, MouseEventArgs e)
{
contolPopup.IsOpen = true;
}
There is a button in this contolPopup that shows another Popup from its Click event handler:
private void setButton_Click(object sender, RoutedEventArgs e)
{
paramPopup.IsOpen = true;
}
This paramPopup behaves a bit strange just after it is shown: it does not close if I click somewhere outside it, but if I click on some control inside this paramPopup and then click somewhere outside, it closes fine.
What can cause this behavior?
I tried to focus paramPopup, but this does not help:
private void setButton_Click(object sender, RoutedEventArgs e)
{
paramPopup.IsOpen = setButton.IsChecked??false;
paramPopup.Focus();
}
Popup.StaysOpen is set to false for both Popups. I use .NET 4.0
Below I provided full source code:
fist popup is opened from a window:
<Window x:Class="GeoControls.WebcamWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:GeoControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
SizeChanged="Window_SizeChanged" Loaded="Window_Loaded" SizeToContent="WidthAndHeight" ResizeMode="NoResize"
Title="{Binding Name}"
MouseEnter="theImage_MouseEnter" MouseLeave="theImage_MouseLeave" MouseLeftButtonUp="Window_MouseLeftButtonUp" Closed="Window_Closed">
<Grid Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.ColumnSpan="2" Name="theImage" Width="{Binding CurrentResolution.Width}" Height="{Binding CurrentResolution.Height}" />
<TextBlock Name="waitingTextBlock" Grid.Row="0" Text="Waiting the response from TV Server..." Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Popup Name="contolPopup" StaysOpen="False" PlacementTarget="{Binding ElementName=theImage}" PopupAnimation="Scroll" Placement="Left" AllowsTransparency="True">
<Border CornerRadius="10" BorderThickness="1" BorderBrush="Black" Padding="10" Background="White">
<local:WebcamControl x:Name="webcamControl" Background="White">
</local:WebcamControl>
</Border>
</Popup>
</Grid>
</Window>
the second popup is opened by ParamButtons contained in WebcamControl contained in the first popup:
<UserControl x:Class="GeoControls.ParamButtons"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:local="clr-namespace:GeoControls"
d:DesignHeight="30" d:DesignWidth="300">
<Grid>
............ omitted some code here................
<Popup Name="paramPopup" StaysOpen="False" PlacementTarget="{Binding ElementName=setButton}" AllowsTransparency="True" Closed="paramPopup_Closed">
<Border Focusable="True" CornerRadius="10" BorderThickness="1" BorderBrush="Black" Padding="10" Background="White">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<local:ParamSlider Grid.Column="0" x:Name="paramSlider" />
<Button Content="OK" Click="okButton_Click" Grid.Column="1" Margin="5" />
<Button Content="Cancel" Click="cancelButton_Click" Grid.Column="2" Margin="5" />
</Grid>
</Border>
</Popup>
</Grid>
</UserControl>

Related

Grid splitter behavior (Expand top panel when bottom panel closes)

In my window, two panels are separated by grid splitter. Splitter functionality works properly. When bottom panel closes, I want top panel to occupy total screen space (similar to visual studio IDE) however when I close the panel, it leaves the blank space. Code which demonstrates this problem is given below :
XAML
<Window x:Class="WpfApp1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800" WindowState="Maximized">
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="panel1" Grid.Row="0" Background="Bisque" Margin="3" Orientation="Vertical">
<Button Height="50" Content="Button 1" Margin="5"/>
<Button Height="50" Content="Button 2" Margin="5"/>
<Button Height="50" Content="Button 3" Margin="5"/>
</StackPanel>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowsPreview="True" ResizeDirection="Rows"/>
<StackPanel x:Name="panel2" Grid.Row="2" Background="AliceBlue" Margin="3" Orientation="Vertical">
<Button Content="X" HorizontalAlignment="Right" VerticalAlignment="Top" Click="Button_Click"/>
<Button Height="50" Content="Button 4" Margin="5"/>
<Button Height="50" Content="Button 5" Margin="5"/>
<Button Height="50" Content="Button 6" Margin="5"/>
</StackPanel>
</Grid>
</Window>
Code behind
using System.Windows;
namespace WpfApp1
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
grid.Children.Remove(panel2);
}
}
}
Can anyone suggest any approach or solution to achieve my requirement i.e. upon closing bottom panel, top panel occupies all available space?
Thanks
You could start with these heights:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
...and simply set the Height of the last one to Auto when you remove the StackPanel:
private void Button_Click(object sender, RoutedEventArgs e)
{
grid.Children.Remove(panel2);
grid.RowDefinitions[Grid.GetRow(panel2)].Height = new GridLength(1, GridUnitType.Auto);
}

WPF: proportional resize of two buttons

I have a WPF form with two buttons in it. When the window is resized, each of the buttons should occupy half of the window's space at all times.
I can not get it to work.
How is it done?
<Window x:Class="ExampleWin.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ExampleWin"
mc:Ignorable="d"
Title="Window" Height="200" Width="200" ToolTip="Tooltip" Topmost="True" WindowStyle="None" AllowsTransparency="True" Background="Transparent" ResizeMode="CanResizeWithGrip">
<Border BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="5,5,5,5" UseLayoutRounding="True">
<Grid>
<Label x:Name="Backdrop" Content="Label" Margin="0,0,0,0" Foreground="{x:Null}" Background="#FFAD3838"/>
<Button x:Name="Button1" Content="" Margin="1,1,99,1" BorderThickness="0" Background="#FF3B87BD"/>
<Button x:Name="Button2" Content="" Margin="99,1,1,1" BorderThickness="0" Background="#FF59B483"/>
</Grid>
</Border>
add ColumnDefinitions to Grid and make them fill available space proportionally (Width="*" which is a default value)
put Button1 into 1st column (index=0) and Button2 into 2nd, using attached property Grid.Column. update Margin value if you don't need empty space near buttons
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="Backdrop" Grid.ColumnSpan="2" Content="Label" Margin="0,0,0,0" Foreground="{x:Null}" Background="#FFAD3838"/>
<Button x:Name="Button1" Grid.Column="0" Content="" Margin="1" BorderThickness="0" Background="#FF3B87BD"/>
<Button x:Name="Button2" Grid.Column="1" Content="" Margin="1" BorderThickness="0" Background="#FF59B483"/>
</Grid>

How to call a Usercontrol from another in same window in WPF ?

I have two UserControls in my project's MainWindow. In MainWindow I call the first UserControl whose content is a Button and put this FirstControl in a Grid. How can I call the second UserControl when I click on the button in FirstUserControl in MainWindow?
First UserControl :
<UserControl x:Class="BenashManage.UserControl.ButtonUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Height="auto" Width="auto" RenderTransformOrigin="0,0">
<Grid>
<Border x:Name="BorderAddEdit" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="5,5,5,5" CornerRadius="9,9,9,9" Background="{x:Null}">
<Grid Margin="0.2,0.2,5.4,4.2">
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Button Content="one" TextBlock.Foreground="White" Grid.Row="1" Margin="9,9,9,9" Height="28" TextBlock.FontSize="15" Name="btn_MartyMang" Click="click_Marty"/>
</Grid>
</Border>
</Grid>
</UserControl>
Second UserControl:
<UserControl x:Class="BenashManage.UserControl.InjuredUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
Height="auto" Width="auto"
mc:Ignorable="d" RenderTransformOrigin="0,0" FontFamily="Arial" FontSize="14" TextBlock.Foreground="White">
<Grid VerticalAlignment="Top" Height="auto" Width="360" HorizontalAlignment="Right">
<Border x:Name="BorderAddEdit" Margin="6,2,6,6" BorderThickness="5,5,5,5" CornerRadius="9,9,9,9" Background="{x:Null}">
<Grid VerticalAlignment="Center" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="20.8"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text=":jjj" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,4,-0.4,3"/>
<TextBox Grid.Row="6" TextAlignment="Right" VerticalAlignment="Center" Margin="3,2.8,2.2,2.2" />
</Grid>
</Border>
</Grid>
</UserControl>
MainWindow:
<Window x:Class="BenashManage.MartyrManage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:BenashManage.UserControl"
Title="MartyrManage" Height="550" Width="550" Style="{DynamicResource ModalWindowStyle}" Loaded="Window_Loaded_1">
<Window.CommandBindings>
<CommandBinding Command="Close"
Executed="CloseCommand_Executed"/>
</Window.CommandBindings>
<Grid >
<Grid Margin="179,10,10.4,10" HorizontalAlignment="Center" VerticalAlignment="Center"
*******
Height="456" Width="357" Name="MoveToUserControl" ></Grid>
<Grid Margin="10,71,372.4,67" HorizontalAlignment="Center" VerticalAlignment="Center" Height="338" Width="auto" Name="ButtonManage" >
<controls:FirstUserControl Margin="0,0,0,92">
</controls:FirstUserControl>
</Grid>
</Grid>
</Window>
There are a couple of ways you can do this:
1) Get the parent of the UserControl and then get its children.
(((control1).Parent as Panel).Children[1] as UserControl)
2) Raise an event in the one UserControl which is handled by MainWindow to call the function in the other UserControl.

xaml window doesnt center

I have a xaml (window) control which contains a grid and inside that grid, two stackpanel. The second stackpanel is set to "collapsed" per visibility. When the form loads and the button on the form is clicked, the xaml window shows up centered by setting WindowStartupLocation="CenterScreen". But when the button on the xaml is clicked to set the second stackpanel's visibility to visible, it doesn't center no more. Can anyone help resolve this issue or tell me on how to fix this?
Update: After looking closely at this, I think it may be because the visibility is set to collapsed? I've tried instead of collapsed, hidden, and it centered it but with the column being shown empty as it's used by the stackpanel.
Here are the codes:
Form1.cs
public Form1()
{
InitializeComponent();
this.StartPosition = FormStartPosition.CenterScreen;
}
private void button_Click(object sender, EventArgs e)
{
MainWindow childWindow = new MainWindow();
childWindow.Show();
}
MainWindw.xaml
<Window x:Class="ChildProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views="clr-namespace:ChildProject"
Title="MainWindow"
Width="Auto"
Height="Auto"
SizeToContent="WidthAndHeight"
AllowsTransparency="False"
ResizeMode="NoResize"
WindowStyle="None"
WindowStartupLocation="CenterScreen">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel x:Name="stkpnlMain"
Grid.Column="0"
Grid.Row="0"
Orientation="Vertical">
<Label Content="This is suppose to display message on right ..."
FontStyle="Italic"
FontWeight="Bold"/>
<Button Content="Click Me"
Width="75"
Margin="5" Click="Button_Click" />
</StackPanel>
<StackPanel x:Name="stkpnlDisplay"
Grid.Column="1"
Grid.Row="0"
Margin="5,0,0,0"
Orientation="Vertical"
Background="YellowGreen" Visibility="Collapsed" >
<Label Content="... First now shows ..."
BorderBrush="Black"
BorderThickness="1"
Background="Yellow" />
<Label Content="Hopefully this will work"
BorderBrush="Red"
BorderThickness="3"
Margin="0,5"
Background="White" />
</StackPanel>
</Grid>
MainWindow.xaml.cs
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
stkpnlDisplay.Visibility = Visibility.Visible;
}

XAML ScrollViewer scroll bar hidden issue (Silverlight)

I’ve got this strange problem whereby the content within a scroll viewer increases in size, the scroll viewer then shows is horizontal scroll bar. However the grid the ScrollViewer is ultimately within doesn’t seem to resize enough to show the scroll bar.
I’ve isolated the problem in this sample app, basically some xaml and some code behind to simulate the content size increase.
Note how the right scroll bar is not correctly showing when you click the resize button, I’ve added some padding to show that its there but not in the correct place.
If I remove the top row it seems to work.
Any ideas and thanks in advance guys and girls?
<UserControl x:Class="SilverlightApplication7.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<Grid
ShowGridLines="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<Grid.RowDefinitions>
<RowDefinition x:Name="DealHeaderRow" Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="DealBarColumn" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="MarketViewerColumn" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="DealEditorColumn" Width="*" ></ColumnDefinition>
<ColumnDefinition x:Name="InfoColumn" Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentControl
x:Name="DealBarRegionContentControl"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0">
<TextBlock Text="DealBarRegion" Width="150" />
</ContentControl>
<ContentControl
Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="2"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<Border Background="#FF9AF172">
<TextBlock Text="MarketViewerRegion" Width="150" />
</Border>
</ContentControl>
<ContentControl
Grid.Column="2"
Grid.ColumnSpan="2"
Grid.Row="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" >
<Border Background="#FFC1FC9F">
<TextBlock Text="DealHeaderRegion" />
</Border>
</ContentControl>
<ContentControl
Grid.Column="2"
Grid.Row="1"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Border Background="MistyRose" >
<TextBlock Text="DealEditorRegion" />
</Border>
</ContentControl>
<Grid
Grid.Column="3"
Grid.Row="1"
>
<ContentControl
x:Name="InfoRegionControl"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch">
<!-- without the padding here you can't see the scroll bar at all !! Its like the
scroll ScrollViewer isn't correctly calculating its width to include the scroll bar,
or the grid isn't sizing at the points its visible??-->
<Border Padding="0,0,9,0" MinWidth="200" x:Name="DealInfoControlPlaceHolder">
<ScrollViewer
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
>
<StackPanel x:Name="ScrollContentPlaceHolder">
<Button Click="Button_Click" Content="Rezize Column" x:Name="ResizeButton" />
</StackPanel>
</ScrollViewer>
</Border>
</ContentControl>
</Grid>
</Grid>
And here is the code behind:
using System.Windows;
using System.Windows.Controls;
namespace SilverlightApplication7
{
public partial class MainPage : UserControl
{
double _dealInfoControlPlaceHolderHeight = 0;
double _dealInfoControlPlaceHolderWidth = 0;
public MainPage()
{
InitializeComponent();
Loaded += (o, e) =>
{
// cache the original width and height
_dealInfoControlPlaceHolderHeight = DealInfoControlPlaceHolder.Height;
_dealInfoControlPlaceHolderWidth = DealInfoControlPlaceHolder.Width;
};
}
private void Button_Click(object sender, RoutedEventArgs e)
{
if (ScrollContentPlaceHolder.Height == 1200)
{
ScrollContentPlaceHolder.Height = _dealInfoControlPlaceHolderHeight;
ScrollContentPlaceHolder.Width = _dealInfoControlPlaceHolderWidth;
}
else
{
ScrollContentPlaceHolder.Height = 1200;
ScrollContentPlaceHolder.Width = 250;
}
}
}
}
Ok I don’t know why the above doesn’t work, but as a workaround I just restructure the page so its behaves the same. That works:
<UserControl x:Class="SilverlightApplication7.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<Grid
ShowGridLines="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="DealBarColumn" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="MarketViewerColumn" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="DealEditorColumn" Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentControl
x:Name="DealBarRegionContentControl"
Grid.Column="0"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0">
<TextBlock Text="DealBarRegion" Width="150" />
</ContentControl>
<ContentControl
Grid.Column="1"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<Border Background="#FF9AF172">
<TextBlock Text="MarketViewerRegion" Width="150" />
</Border>
</ContentControl>
<Grid
Grid.Column="2" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl
Grid.Row="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" >
<Border Background="#FFC1FC9F">
<TextBlock Text="DealHeaderRegion" />
</Border>
</ContentControl>
<Grid
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentControl
Grid.Column="0"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Border Background="MistyRose" >
<TextBlock Text="DealEditorRegion" />
</Border>
</ContentControl>
<ContentControl
Grid.Column="1"
x:Name="InfoRegionControl"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Right">
<!-- without the padding here you can't see the scroll bar at all !! Its like the
scroll ScrollViewer isn't correctly calculating its width to include the scroll bar,
or the grid isn't sizing at the points its visible??-->
<Border Padding="0,0,9,0" MinWidth="200" x:Name="DealInfoControlPlaceHolder">
<ScrollViewer
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
>
<StackPanel x:Name="ScrollContentPlaceHolder">
<Button Click="Button_Click" Content="Rezize Column" x:Name="ResizeButton" />
</StackPanel>
</ScrollViewer>
</Border>
</ContentControl>
</Grid>
</Grid>
</Grid>

Resources