I have a Popup and a ToggleButton. I set a binding like this:
<ToggleButton x:Name="myToggle" Content="{Binding MyData.Title}" />
<Popup IsOpen="{Binding IsChecked, ElementName=myToggle}" >
<TextBlock Text="{Binding MyData.Details}" />
</Popup>
As you see, I bound the toggle button's content to MyData.Title and the popup's content to MyData.Details.
Now I had the criteria MyData.ShowDetails. If it is true the popup can open and if it is false the popup should not be opened.
How can I set a binding to achieve this?
I tested these bindings on the Popup but no one works:
Visibility="{Binding MyData.ShowDetails, Converter={StaticResource BooleanToVisibilityConverter}}"
IsEnable="{Binding MyData.ShowDetails}"
You could put a panel (Grid ) on top of all the content in your window.
That needs to have a background set but it can be low opacity if you still want to see the window content.
Make that visible only when the popup is shown and collapse otherwise.
Make sure you set focus to your popup when it's shown.
.
Bear in mind.
Popups are separate windows.
They are intended to be shown briefly and have a number of potential drawbacks if you show them for longer periods. EG other applications can appear under them and they don't move with their "parent" window/control.
You might find a modal window is easier and suits better, depending on your exact requirements.
Just instantiate a window and use
PopupWindow newWindow = new PopupWindow();
newWindow.ShowDialog();
Where PopupWindow is just any old window styled to look like you want the popup.
This will guarantee the user can't somehow interact with any other window in your app.
.
Another possibility is to show your "popup" content in a grid which appears on top of everything inside your main window.
That's how editing data works in this:
https://gallery.technet.microsoft.com/scriptcenter/WPF-Entity-Framework-MVVM-78cdc204
The plus or minus of that approach is that it's in the one window.
--- Brian Kress ---
I found a special answer in my case. Instead of disabling Popup, I should disable the ToggleButton:
<ToggleButton x:Name="myToggle" Content="{Binding MyData.Title}"
IsEnabled="{Binding MyData.ShowDetails}"/>
<Popup IsOpen="{Binding IsChecked, ElementName=myToggle}" >
<TextBlock Text="{Binding MyData.Details}" />
</Popup>
It works perfect!
Note: This is not a general answer for Popup. Welcome to anyone who has an answer.
Related
I've added a simple WPF window with two buttons in it.
The buttons are made visible by a certain logic and have bindings which change their Visibility and IsEnabled properties.
Now, I'm testing with windows navigator and seeing that the default windows navigator is reading about the buttons even when they are not visible.
How should I make the button not read by Screen Readers (or windows default navigator) when the button is disabled or not visible?
<Button Margin="0,0,80,10" Height="25" HorizontalAlignment="Right" Name="failedButton"
VerticalAlignment="Bottom" Width="75" DataContext="{Binding InstallationViewModel}"
Command="{Binding Failed}"
Visibility="{Binding Failed,
Converter={StaticResource BooleanToVisibilityConverter}}"
Content="Failed?" />
Automation api reads everything that provide a automation peer. So if you don't want your ui element expose to automation clients, you need to override OnCreateAutomationPeer and return null. And that means, you choose either support automation or not, but you can't change it at runtime.
I'm trying to close a flyout when a click on his or on another side of the window, I use the ExternalCloseButton=Left property. Is this okay? I also tried removing the property AutoCloseEnabled, but could not get results.
When I use a flyout with the property EnabledAutoClose, when closed, the focus is lost in the control it was.
You can help solve this problem?
<mahApps:MetroWindow.Flyouts>
<mahApps:FlyoutsControl>
<mahApps:Flyout Position="Bottom"
AutoCloseInterval="3000"
IsOpen="{Binding IsOpen}"
IsAutoCloseEnabled="True"
ExternalCloseButton="Left">
</mahApps:Flyout>
</mahApps:FlyoutsControl>
</mahApps:MetroWindow.Flyouts>
If you set IsPinned="False" then the Flyout will be closed on left mouse click outside the Flyout.
<Controls:Flyout Height="75"
CloseButtonVisibility="Collapsed"
IsPinned="False"
Position="Bottom"
TitleVisibility="Collapsed">
<TextBlock VerticalAlignment="Center" Text="This is an AppBar" />
</Controls:Flyout>
Sample is from the main demo. Hope this helps.
You can use PreviewMouseLeftButtonUp of the MainWindow or whatever view contains the flyout and set the isOpen to false. If you want to close it only when user clicks the outside of the flyout than you can check it with isMouseOver property of the flyout.
Could anyone explain how to use the XAML popups with Caliburn Micro.
Thanks
Edit:(Made my code more releavent to what I want to achieve)
When I define a popup in xaml like this:
<Button x:Name="ShowPopup" Content="Popup"/>
<Popup x:Name="my_popup_xaml" Grid.Row="2">
<Border BorderThickness="2" Margin="10" BorderBrush="Green">
<StackPanel Background="LightBlue">
<TextBlock Text="Select Option" FontSize="21" Margin="10,0" />
<StackPanel Orientation="Horizontal" Margin="0,10">
<Button x:Name="SelectPhoto" Content="Select photo From Library" Width="215"/>
<Button x:Name="CapturePhoto" Content="Use Camera" Width="215"/>
</StackPanel>
</StackPanel>
</Border>
</Popup>
How do I display this popup using the WindowManager?
Should I create new View Model for this because I just need to use PhotoChooser task and the Camera Capture task here?
How do I bind Popup to my View Model.
Edit:
#Charleh, Your Suggestion for using with windowmanager with a separate ViewModel worked, with a minor tweak.
I removed the <Popup> tag and used the window manager to display the popup.
But now I cannot close the popup and the popup is cropped as it's displayed at the top of the screen. How do I fix this?
Edit: I was able to close the dialog using the the Screen's TryClose() Method.
When I used the ShowDialog method instead the of the ShowPopupmethod and the alignment of the window was a bit better but it is still stuck at the top and wont align in the center.
Edit: I have created a new PhoneApplicationPage(Windows Phone 8 equivalent of window) and displayed it as a dialog. The problem with this approach is that the PhoneApplicationPage is not stretching automatically to fill the screen space(Which it does when not displayed as a dialog). It's just stretching to accommodate the content inside it. Setting `VerticalAlignment="Stretch" has no effect.
Giving the Height property a particular value is not suitable because of it does not adjust to well to different phone resolutions.
#Charleh I tried specifying height and width like this:
Dictionary<string, object> properies = new Dictionary<string, object>();
properies.Add("Height", 768);
properies.Add("Width", 480);
windowManager.ShowDialog(new ImageSelectorPopupViewModel(),null,properies);
This Code has no effect (although specifying the height in Xaml works but I cannot use that as I have to accommodate for different screen resolutions on the phone)
You really need to read up on Caliburn Micro before you post - there are literally tons of articles showing how to bind commands on your view to methods on your VM
To do so in this case either:
Bind using convention by giving your button the same name as the method
<Button x:Name="ShowPopup" />
Bind using action message syntax:
<Button cal:Message.Attach="[ShowPopup]" />
All the answers are here: http://caliburnmicro.codeplex.com/documentation
(specifically: http://caliburnmicro.codeplex.com/wikipage?title=All%20About%20Actions&referringTitle=Documentation)
You do the same thing with your button, so you can do the same thing with your popup
(have you also considered using Caliburns WindowManager which has a ShowPopup method?)
Edit:
On re-reading it looks like you want to use the same ViewModel for your current View and Popup - is this the case or do you want a new ViewModel for your Popup? I'd suggest using WindowManager, and creating a ViewModel for the popup - it will be more in-line with what CM already does
Is there a way to put a background color in a WPF popup in XAML.
A WPF Popup has no default visual appearance. It is merely a place holder for content that needs to popup.
Simply have your Popup contain an item that does have a Background property and set that to your desired color as in this example from the Popup class documentation.
<Popup Name="myPopup">
<TextBlock Name="myPopupText"
Background="LightBlue"
Foreground="Blue">
Popup Text
</TextBlock>
</Popup>
How i can attach a single close button on the tabcontrol in C#.
There is a many way to attach a close button individually on each tabpages but I want to attach only single(e.g.) we can see on microsoft visual stdio 2008.
So Plz help me.
Here is a cheap way to do it, which might get you started:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<TabControl DockPanel.Dock="Top">
<TabItem Header="Test1" />
<TabItem Header="Test2" />
<TabItem Header="Test3" />
<TabItem Focusable="False">
<TabItem.Header>
<Button Command="{Binding CloseTab}" Content="X" Width="21" HorizontalAlignment="Stretch" />
</TabItem.Header>
</TabItem>
</TabControl>
</DockPanel>
</Window>
You then are left to implement a public ICommand CloseTab field or property on your DataContext, and style the tab control to your liking.
Edit:
If you use this method:
Wiring up the button is tricky. You have to be careful not to close the tab that contains the button
This isn't well adapted to dynamically created tabs, because you have to ensure the close button is appended to the list
You have to figure out how to re-select the last selected tab, when you close the selected tab
You'll also have weird behavior when tabs start to wrap
The tab-stop behavior is hard to get right. You can't make the last TabItem focusable, since focus is used to determine what to close, but tabbing to the close button breaks the normal TabItem keyboard flow
I have come up with a style that makes the button look like a regular tab, with a bold X on it, which makes it visually more like IE8, and fixes the keyboard selection problem. But it is complicated, and this solution is complicated enough.
Ultimately, a close button on every tab jives better with the tab control's default behavior. The only problem with that solution is that it takes up more space. You could cheat and make the close button collapse until you mouse over the tab item, though that's sort of a user-experience no-no, unless you just shrink it.
If you are serious about following through with the separate close button, I suggest you look at this article, and adapt what they do for the scroll buttons to your close button:
http://www.blogs.intuidev.com/post/2010/02/10/TabControlStyling_PartThree.aspx
Ignore what they do for close buttons :)
Would it be possible to have your tabcontrol on another container control and let that control's close button do the job?