I have a StackPanel with two textblocks. When the StackPanel is clicked, in the code behind I set a Popup to IsOpen=True. I would like this Popup to go away when the user clicks anywhere else in the app that is outside of the Popup.
<DataTemplate DataType="{x:Type something}">
<StackPanel Orientation="Vertical" Margin="3" MouseUp="PanelClick">
<Popup AllowsTransparency="True" PopupAnimation="Slide"
StaysOpen="False">
<Border
Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
Padding="4" Opacity="1" CornerRadius="3"
MinHeight="24" MaxWidth="267">
<StackPanel Orientation="Vertical">
<TextBlock Text="Something"/>
<TextBox>aaa</TextBox>
<TextBox>bbb</TextBox>
</StackPanel>
</Border>
</Popup>
<TextBlock
Text="Something else" />
<TextBlock
Text="Some other stuff" />
</StackPanel>
</DataTemplate>
In the code behind I have
private void PanelClick(object sender, MouseButtonEventArgs e)
{
var panel = sender as StackPanel;
var pop = panel?.Children.Cast<Popup>().FirstOrDefault();
if (pop != null)
{
pop.IsOpen = true;
}
}
With the code as presented, I find that the Popup does NOT go away by itself unless I first click (to give focus) into the aaa or bbb textbox and THEN click away from the pop up. It also gives away if I click on a different app. This seems in contradiction to the StaysOpen documentation [https://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup.staysopen%28v=vs.110%29.aspx]
However, if I put a button around my StackPanel and do the code-behind from the Click event then the Popup works as stated in the documentation
<DataTemplate DataType="{x:Type something}">
<Button Click="ButtonDo">
<StackPanel Orientation="Vertical" Margin="3">
<Popup AllowsTransparency="True" PopupAnimation="Slide"
StaysOpen="False">
<Border
Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
Padding="4" Opacity="1" CornerRadius="3"
MinHeight="24" MaxWidth="267">
<StackPanel Orientation="Vertical">
<TextBlock Text="Something"/>
<TextBox>moo</TextBox>
<TextBox>moo</TextBox>
</StackPanel>
</Border>
</Popup>
<TextBlock
Text="Something else" />
<TextBlock
Text="Some other stuff" />
</StackPanel>
</Button>
</DataTemplate>
Why is there this difference of behaviour?
Also, as a curiosity, attempting to use codebehind with MouseUp from the button doesn't even call the code behind - but that's a problem I don't need to know why.
Related
I am building a WPF MVVM application.
What I have:
I have a ShellWindow which looks like this:
It is composed by 2 rows:
1: the hamburger menu (not important) with Height="*"
2: the console with Height="100"
The console is a UserControl:
<UserControl
//namespaces>
<Grid Name="LoggingGrid" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}">
<Button
x:Name="CollapseBtn"
Width="25"
Height="25"
Click="CollapseBtn_Click"
Content="▲">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<StackPanel Margin="5,0,0,0" Orientation="Horizontal">
<Image
Height="25"
Source="/Images/console-icon.png"
Visibility="Visible" />
<Label
Content="Console"
FontSize="16"
Foreground="White" />
</StackPanel>
</TextBlock>
<Border Grid.Row="1">
<ListView
x:Name="LoggingList"
Margin="5"
Background="Black"
BorderThickness="0"
Foreground="White"
ItemsSource="{Binding Logs, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</Border>
</Grid>
</UserControl>
I have omitted the non-important things.
What I want to do:
Whenever the user clicks on the button, the console should collapse and look something like this:
The arrow is also changed.
How can I implement this? What is the best approach using MVVM?
What I have tried:
I have tried using a button click event handler in the code behind - CollapseBtn_Click, just to see what will happen:
private void CollapseBtn_Click(object sender, System.Windows.RoutedEventArgs e)
{
LoggingGrid.Visibility = System.Windows.Visibility.Hidden;
}
Apparently it removes the user control and leaves a white background where it used to be.
Instead of setting the Visibility of the whole LoggingGrid to Hidden, you should set the Visibility of the LoggingList to Collapsed. (For the difference between Hidden and Collapsed, see here: Difference between Visibility.Collapsed and Visibility.Hidden).
Depending on your layout in the ShellWindow you probably have to adjust your row height configuration in the UserControl such that the collapsed LoggingGrid leads to a row with a height of zero.
Regarding MVVM the best approach would be to bind the Button to a bool property ConsoleVisible on your ViewModel such that clicking the button toggles the property between true and false. The styling of the button can be bound to the same property. For the LoggingList Visibility you could use a Binding with a BooleanToVisibilityConverter on the same property.
I want to achieve Grid Left Click inside a user control.
My WPF User Control
<Grid>
<Border Grid.Row="0" CornerRadius="7" >
<Border.Background>
<SolidColorBrush Color="#ffffff" Opacity="0.08"></SolidColorBrush>
</Border.Background>
<Grid>
<Image Source="/Assets/Images/Icon/ic-add.png" Width="70" Height="70"/>
</Grid>
</Border>
</Grid>
Here is my Window
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<usercontrols:CreateNewProfile Width="200" Height="235" Margin="40,40,0,0">
</usercontrols:CreateNewProfile>
</<StackPanel>
</Grid>
There is a command Called CreateNewProfile
Very straight question How to bind command on Left Click of User Control?
You can use InputBindings inside of your UserControl:
<Grid.InputBindings>
<MouseBinding MouseAction="LeftClick" Command="{Binding CreateNewProfile}"/>
</Grid.InputBindings>
I have a problem on how to correctly set the Panel.ZIndex of a Popup inside a Grid. The goal is that when I click the Emergency button, a Popup window will display with an image on it and overlay (cover) the buttons (see screenshot below).
I have set the Grid Panel.ZIndex="0"and the Popup to Panel.ZIndex="1" However, the Popup window doesn't overlay the buttons.
This is the XAML implementation.
<StackPanel Background="Black">
<Grid Background="#253341" Panel.ZIndex="0">
<Popup HorizontalOffset="-5" VerticalOffset="0" IsOpen="False"
HorizontalAlignment="Left" VerticalAlignment="Top"
Name="EmergencyPopup" Placement="RelativePoint" AllowsTransparency="True"
PlacementTarget="{Binding ElementName=EmergencyButton}"
Width="1080" Height="1920" Panel.ZIndex="1">
<Border BorderBrush="Black" BorderThickness="2" CornerRadius="2">
<Grid>
<Image Source="{StaticResource EdenParkInfoImg}"/>
<Label FontWeight="Bold" Foreground="Red" HorizontalAlignment="Right" FontSize="25"
MouseLeftButtonDown="Label_MouseLeftButtonDown">close X</Label>
</Grid>
</Border>
</Popup>
</Grid>
</StackPanel>
Screenshot of the Popup window and buttons (the red box indicates that the image inside the Popup is behind the buttons)
Have I correctly set the Panel.ZIndex of the Grid and Popup? What is the correct way of doing it?
Any help is greatly appreciated.
I did find a way on how to solve the issue. In my Popup dialog xaml implementation, I set HorizontalOffset to 0 and VerticalOffset to 180. In that way, Popup dialog vertically overlays the buttons and ZIndex no longer matters. WPFUser is right, it should work without explicitly defining ZIndex.
<Popup HorizontalOffset="0" VerticalOffset="180" IsOpen="False" Width="1080"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="1920"
Name="EmergencyPopup" Placement="Top" AllowsTransparency="True">
<Border BorderBrush="Black">
<Grid>
<Image Source="{StaticResource EdenParkInfoImg}" />
<Label FontWeight="Bold" Foreground="Red" HorizontalAlignment="Right" FontSize="25"
MouseLeftButtonDown="Label_MouseLeftButtonDown" Margin="0,0,15,0">close X
</Label>
</Grid>
</Border>
</Popup>
There is much of code. But problem is there:
I've got a Listbox with Control as DataTemplate:
<ListBox x:Name="UpcomingConcertsList" ItemsSource="{Binding UpcomingConcerts}" HorizontalAlignment="Left" Height="350" Margin="10,208,0,0" VerticalAlignment="Top" Width="370">
<ListBox.ItemTemplate>
<DataTemplate>
<Control MouseDoubleClick="UpcomingConcert_DoubleClick">
<Control.Template>
<ControlTemplate>
<Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4" Width="320">
<Grid Margin="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2" Width="100" Height="75" Margin="6" Source="{Binding ImageURL}"/>
<StackPanel Grid.Column="1" Margin="2,6">
<TextBlock FontWeight="Bold" Text="{Binding Name}"/>
<TextBlock Text="{Binding Date, StringFormat={}{0:g}}"/>
<TextBlock Text="{Binding Bands, Converter={StaticResource BandsConverter}}"/>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Control.Template>
</Control>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And click event code behind:
private void Concert_DoubleClick(object sender, MouseButtonEventArgs e)
{
Control control = sender as Control;
Concert concert = control.DataContext as Concert;
ConcertView wndw = new ConcertView(concert.ConcertID);
wndw.Show();
}
And ConcertView window is opened but just under my MainWindow. wndw.Activate(), wndw.Focus() don't help.
I tried to do this.IsEnabled = false and wndw.Show() after this. Then my ConcertView was above MainWindow. But as this.IsEnabled comes to true, ConcertView suddenly goes under.
Is ther eany ideas?
But TopMost makes my window being over all the applications What do you mean by this? You're currently using an application and when you click a button, a new window is loaded. So you want the new window to be at topmost itself right?
You can set the Owner property of a window to set it's owner. ie the MainWindow. If you set this then the current window will be owner window.
Window ownedWindow = new Window();
ownedWindow.Owner = this;
ownedWindow.Show();
Now try setting the wndw.TopMost = true;and check if its working.
I'm new in XAML for Windows Phone 8.1 and have some troubles with
making a Stackpanel clickable
collapse Item, when clicked
My work so far looks like that:
And the Code to that (please correct me, if there are major flaws):
<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
<StackPanel Orientation="Horizontal">
<StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
<Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
</StackPanel>
</StackPanel>
</Border>
This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:
<ListBox x:Name="ListBox1" Margin="0"
Width="400" Height="200" HorizontalAlignment="Left"
ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
// the code above
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is:
How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?
Thank you very much in advance.
The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?
If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
<StackPanel>
<!--- rest of template --->
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
int minHeight = 40; // change to whatever you want
Border b = sender as Border;
if (b.ActualHeight > minHeight)
{
b.Height = minHeight;
}
else
{
b.Height = double.NaN; // this will change the height back to Auto, showing everything
}
}
Code In Action
This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.