What is the SIMPLEST way of implementing list view multiple select scenario together with the AppBar? So that it behaves exactly as the Windows 8 start screen when multiple items selected (e.g. via the mouse right-click).
I want to show the app bar together with the first selected list view item, I want to keep it opened with the second, third and so on and I want to close it either by any app bar button action (context action performed) or by other system wide app bar close action (e.g. right-click somewhere else, which would mean context action cancelled).
My current implementation is too complicated. I believe I must have missed something - such a basic and common scenario must be possible to implement in a standardized way.
Scaffolding code prepared below. If only this code used the app bar hides before right-click on the second list view item and one more right-click on list view is required (not acceptable). If combined with IsSticky it is not possible to select the second list view item at all.
<Page
x:Class="ListViewAndAppBar.ExamplePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ListViewAndAppBar"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
DataContext="{Binding ExamplePageViewModel, Source={StaticResource Locator}}">
<Grid Background="Gray">
<ListView
x:Name="ListView"
ItemsSource="{Binding Persons}"
SelectionMode="Multiple"
SelectionChanged="ListView_SelectionChanged">
</ListView>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="BottomAppBar" Padding="10,0,10,0">
<Button x:Name="BottomAppBarBack" Tag="Back" Style="{StaticResource BackAppBarButtonStyle}" HorizontalAlignment="Left" />
</AppBar>
</Page.BottomAppBar>
</Page>
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
this.BottomAppBar.IsOpen = true;
//this.BottomAppBar.IsSticky = true;
}
Answering my own question. I found the solution short after I posted the question. I will leave it here in case somebody does the same beginner's mistake.
The solution cannot be simpler: IsSticky must be called BEFORE IsOpen. After this switch all works as expected.
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (this.ListBox.SelectedItems.Count > 0)
{
this.BottomAppBar.IsSticky = true;
this.BottomAppBar.IsOpen = true;
}
else
{
this.BottomAppBar.IsOpen = false;
this.BottomAppBar.IsSticky = false;
}
// Or the following if you wish...
// this.BottomAppBar.IsOpen = this.BottomAppBar.IsSticky = this.ListView.SelectedItems.Count > 0;
}
Related
I have a list of objects that I need to represent as a list of buttons.
These buttons should normally act as a regular Button; when the checkbox is checked, they should work as ToggleButtons and remain pressed. But I also need them to be mutually exclusive, like a RadioButton (only one can only be toggled at any time).
I tried using a RadioButton as the template for my ItemsControl, but they are not mutually exclusive (I guess that they are not actually children of the same control).
So I thought to use a ToggleButton as the template, manually uncheck it if the checkbox is not checked, and manually handle the mutual exclusion.
However, I can't find a way to retrieve the toggle buttons for the other items in the list to uncheck them.
Here's my XAML:
<Window x:Class="WpfApp9.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<UniformGrid Rows="1">
<UniformGrid.Resources>
<DataTemplate x:Key="template">
<ToggleButton Name="Toggle"
Checked="ToggleButton_Checked"
Content="{Binding}"/>
</DataTemplate>
</UniformGrid.Resources>
<ItemsControl Name="lst" ItemTemplate="{StaticResource template}" />
<CheckBox Name="CheckToggle"
HorizontalAlignment="Center"
VerticalAlignment="Center">
TOGGLE
</CheckBox>
</UniformGrid>
</Window>
And this is my code-behind:
using System.Windows;
using System.Windows.Controls.Primitives;
namespace WpfApp9
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
lst.ItemsSource = new[] { "foo", "bar", "baz" };
}
private void ToggleButton_Checked(object sender, RoutedEventArgs e)
{
var toggle = (ToggleButton)sender;
// If the checkbox is not checked, release the button immediately
if (CheckToggle.IsChecked != true)
toggle.IsChecked = false;
// now how do I uncheck the other ToggleButtons?
}
}
}
I ended up solving the problem above in a different way.
In the question I said that
I tried using a RadioButton as the template for my ItemsControl, but they are not mutually exclusive (I guess that they are not actually children of the same control)
but I didn't realize I could use the GroupName property to force them into the same group. At this point the template can be this:
<DataTemplate x:Key="template">
<RadioButton Checked="RadioButton_Checked"
GroupName="SomeGroupName"
Content="{Binding}"/>
</DataTemplate>
And I get my mutually exclusive buttons without handling them manually.
How can I let a user of a Windows Universal App swipe from one page to another? (I thought this would be easy to find, but searching hasn’t uncovered the answer.)
And if this is possible within one page - that's fine too. (To swipe one grid out and another in.)
Pivot control behaves like you discribed.
See guidelines for tabs and pivots.
Example:
<Page x:Class="App1.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 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Pivot>
<PivotItem Header="Item 1" Background="Black" />
<PivotItem Header="Item 2" Background="Red" />
<PivotItem Header="Item 3" Background="Blue" />
</Pivot>
</Grid>
You can use GestureRecognizer and manipulate what you wanna do. Create animation for the FX.
I want to say use a FlipView control, but that could be dangerous if your views are too complex. FlipView will keep your pages rendered and ready to be flipped to at all times. I think you can try to implement your own thing to keep memory usage low. Maybe use a GestureRecognizer so that you have control over where the user can swipe and only render what you need and discard anything obsolete or off the screen.
Pivot will also create this effect, but the difference is that it must completely slide one element off the screen and then slide the next one in. It keeps from having two or three views rendered at once, which is good for memory. However, you won't be able to see both pages sliding in/out at the same time.
Try them both, see which is best for you.
I have something similiar to what you're asking:
How to "swipe" from one page to another:
On page 1 (The page where you will swipe FROM)
Make a grid, and put these values in:
XAML:
<Grid Padding="15,15,15,15"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
ManipulationMode="TranslateX,TranslateInertia,System"
ManipulationDelta="SwipeablePage_ManipulationDelta"
ManipulationCompleted="SwipeablePage_ManipulationCompleted">
Code Behind:
private bool _isSwiped;
private void SwipeablePage_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (e.IsInertial && !_isSwiped)
{
var swipedDistance = e.Cumulative.Translation.X;
if (Math.Abs(swipedDistance) <= 2) return;
if (swipedDistance > 0)
{
// go to next page
this.Frame.Navigate(typeof(Page2));
}
else
{
// do nothing
}
_isSwiped = true;
}
}
I have a MainWindow.XAML and CustomersView.XAML.
When I click the Customer Button on MainWindow , I want to navigate to CustomersView.XAML and palong with that need to pass few parameters.
I can use NavigationService but is only available with Pages and not Window.Hyperlink is not an option at this moment.
This might be fairly simple thing but not sure how can I implement this using MVVM and with out any third party control.
private void Navigate_Click(object sender, RoutedEventArgs e)//By Prince Jain
{
this.NavigationService.Navigate(new Uri("Page3.xaml", UriKind.Relative));
}
There are many options to navigate from one window to another in WPF. You can use a frame in your MainWindow and navigate all your pages right inside your Frame.
<Window
x:Class="NavigationSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<DockPanel>
<Frame x:Name="_mainFrame" />
</DockPanel>
</Window>
From code, you can tell the frame to navigate, like so:
_mainFrame.Navigate(new Page1());
Which just so happens to be a helpful shortcut to:
_mainFrame.NavigationService.Navigate(new Page1());
Or if you using any framework like PRISM, you are allowed to create a Shell where you can define regions and let your pages navigate to that.
Navigation Using the Prism Library 5.0 for WPF
Simple Way in XAML:
<Button HorizontalAlignment="Right" Name="continueButton" Width="75"
Margin="0,0,8,11" Height="23" VerticalAlignment="Bottom"
Click="continueButton_Click">
Navigate
</Button>
C#:
private void continueButton_Click(object sender, RoutedEventArgs e)
{
this.NavigationService.GoForward();
//or
this.NavigationService.Navigate("Second.xaml")
}
In MVVM XAML:
<Button Command="{x:Static Views:Commands.NavigateHelp}"
Content="Help"/>
In Views (We have a Commands.cs file that contains all of these):
public static RoutedCommand NavigateHelp = new RoutedCommand();
In the page constructor, you can connect the two:
CommandBindings.Add(new CommandBinding(Commands.NavigateHelp,
NavigateHelpExecute));
NavigateHelpExecute can be in the code behind (which is what we do), hook into a ViewModel event handler, or whatever. The beauty of this is that you can disable other navigation like so:
CommandBindings.Add(new CommandBinding(NavigationCommands.Refresh, null));
I've been pounding away at this issue for a little while, and have only found part of the solution.
I'm trying to set up a TabControl so that I can in some cases prevent the user from changing the currently selected tab. When the user is prevented from changing the currently selected tab, then they are shown a dialog box.
I have already read the following documents:
WPF - reset ListBox scroll position when ItemsSource changes
http://wizardsofsmart.net/uncategorized/itemssourcechanged-event-using-attached-dependency-properties/
http://joshsmithonwpf.wordpress.com/2009/09/04/how-to-prevent-a-tabitem-from-being-selected/
http://social.expression.microsoft.com/Forums/en-US/wpf/thread/f7b46018-1e97-4bbe-ada8-49b75dbc1da2/
I have implemented the solution indicated in the 3rd link (though all of the above create the same error seen below). And it works, but...
Things mess up thoroughly if the user does the following:
attempts to change the tab when such an action is disallowed. The MessageBox pops up with the error.
the user clicks "OK" and is returned to the original window.
the user tries again to change the tab. No MessageBox appears.
if the user minimizes the window, and then maximizes it again, then the MessageBox that was supposed to appear earlier appears.
the user clicks "OK" and is returned to the original window... but the tab has been changed to the one they selected before, even though they should not be able to change tabs.
This is obviously not ideal behavior. Why isn't the MessageBox appearing the second time, and why is the tab changing when it should be disallowed from doing so?
If I remove the MessageBox part, it works fine.
Here is the code for the TabControl.SelectionChanged event handler:
bool _isChanging = false;
private void tabControlForNavigation_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (!_isChanging && canChangeTabs.IsChecked.HasValue)
{
_isChanging = true;
bool canLeave = canChangeTabs.IsChecked.Value; //normally this would be replaced by a check in the ViewModel
if (!canLeave)
{
int prevIndex = tabControlForNavigation.Items.IndexOf(tabControlForNavigation.SelectedContent);
tabControlForNavigation.SelectedIndex = prevIndex;
MessageBox.Show("Can't change tabs!"); //if I comment out this line, everything works fine.
}
_isChanging = false;
}
}
I am using MVVM to implement this. The Window looks like this:
<Window x:Class="TestTabControlSwitching.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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<CheckBox x:Name="canChangeTabs"
Content="Can Change Tabs"
IsChecked="True" />
<TabControl x:Name="tabControlForNavigation"
Grid.Row="1"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Collection}"
SelectedItem="{Binding SelectedItem}"
SelectionChanged="tabControlForNavigation_SelectionChanged"
Margin="4"
HorizontalAlignment="Stretch">
<TabControl.ItemTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Path=Name}" />
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</Grid>
I'm omitting the rest of the code for sake of brevity- there is a pretty straight-forward ViewModel structure backing the window.
As you noticed, the problem is the MessageBox inside the event handler. The focus will change to the MessageBox and you can get all kind of undesired effects. I've had my own problems with this.
Here is a couple of SO question on the same subject
WPF: Does MessageBox Break PreviewMouseDown?
Wpf stop routing event when MessageBox appear?
If you must display a message to the user then an alternate approach might be to create a new Window which you style like a MessageBox and then call Show (not ShowDialog) on it inside the event handler.
I know this post is a bit old, but I have a very easy way to accomplish this:
Use the tab_Enter event and create a method that performs your check and displays a MessageBox to the user and then set myTabs.SelectedIndex to the prior index. A simple example:
private void someTab_Enter(object sender, EventArgs e)
{
if (myCondition)
{
MessageBox.Show("Sorry, myCondition will not let you move to this tab.");
myTabs.SelectedIndex = someOtherTabIndex;
}
}
This was a very detailed question. I had the same problem you had (i.e. the message box doesn't display on 2nd or 3rd selection changed until you minimize and maximize the window) and after much debugging and multiple google searches, stumbled on the below linked MSDN forum post.
[TabControl SelectionChanged Strange Behaviour?]
Please ignore the poorly formatted question and answer. But as mentioned in the answer, putting it inside a dispatcher and focussing the selected tab after setting the index resolved the issue for me.
You are missing an easy trick. Just make focusable=False for the Tab header.
<TabItem Header="MY TAB" Focusable="False">
You could bind this property to your view model.
<TabItem Header="MY TAB" Focusable="{Binding Bool_CanHasCheeseBurger}">
What would be the best way to build a data-navigation like in access-forms in XAML/C#?
Should I build a user control (or even custom control) that I just bind to my collection in which I can put other controls? (hence this question: C# User Control that can contain other Controls (when using it) )
Or can I build something by deriving from then ItemsControl somehow? how?
Or would this be done completely different today (like "this style of navigation is so last year!")?
I'm relatively new to C# and all (not programming as such, but with more like "housewife-language" Access-VBA) also I'm no native english speaker. So pls be gentle =)
You can create user control and place a bunch of buttons (First, Prev, Next, Last, etc..) in it and place it on the main window. Secondly, you can bind your data navigation user control to a CollectionViewSource which will help you to navigate among your data.
Your main window:
<Window.Resources>
<CollectionViewSource x:Key="items" Source="{Binding}" />
</Window.Resources>
<Grid>
<WpfApplication1:DataNavigation DataContext="{Binding Source={StaticResource items}}" />
<StackPanel>
<TextBox Text="{Binding Source={StaticResource items},Path=Name}" />
</StackPanel>
</Grid>
Your Data Navigation User Control:
<StackPanel>
<Button x:Name="Prev" Click="Prev_Click"><</Button>
<Button x:Name="Next" Click="Next_Click">></Button>
<!-- and so on -->
</StackPanel>
And your click handlers goes like this:
private void Prev_Click(object sender, RoutedEventArgs e)
{
ICollectionView view = CollectionViewSource.GetDefaultView(DataContext);
if (view != null)
{
view.MoveCurrentToPrevious();
}
}
I hope this helps.
Sounds like you're after a DataGrid control. Microsoft is releasing a WPF DataGrid as part of a WPF Toolkit which you can download here: http://wpf.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=25047.