I've been working with MahApps and wanted to add a Flyout window. I assumed incorrectly that the logic was included with the control to detect when it should be opened closed.
What are some ways the community have been accomplishing this?
Currently I have added a rectangle to the grid on the far edge that uses mouse enter events to display the flyout and then the built in close arrow button.
What other neat ways are people doing this?
<controls:MetroWindow.Flyouts>
<controls:FlyoutsControl Name="FlyoutControlSettings" Background="Beige">
<controls:Flyout x:Name="yourMahAppFlyout" Header="Flyout" Theme="Accent" Position="Left" Width="600" IsOpen="False" BorderBrush="Black" BorderThickness="3,0,3,3">
<TextBlock FontSize="24">Hello World</TextBlock>
</controls:Flyout>
</controls:FlyoutsControl>
</controls:MetroWindow.Flyouts>
And then then code would look like this
private void ToggleFlyoutSetting(object sender, RoutedEventArgs e)
{
yourMahAppFlyout.IsOpen = !yourMahAppFlyout.IsOpen;
}
Related
I am creating an application which currently lets users scroll to zoom into an image. Currently, if I try to use a scrollview to allow users to scroll down the page, it breaks this feature. Is there any way for me to implement a scrollbar that does not access the scroll wheel? What I am looking for is a way to only allow users to access the scrollbar by clicking it, not by using the scrollwheel.
Set the MouseWheel event on your image and set e.Handled = true at the end.
Contrived example -
XAML:
<Grid>
<ScrollViewer>
<Canvas Width="1000" Height="1000" Background="PeachPuff" MouseWheel="Canvas_MouseWheel" />
</ScrollViewer>
</Grid>
Code:
private void Canvas_MouseWheel(object sender, MouseWheelEventArgs e)
{
(sender as Canvas).Background = Brushes.Blue;
e.Handled = true;
}
I'm using a Frame in a Window to display content and I added navigation with
<Frame NavigationUIVisibility="Visible" Name="FrameContent" VerticalAlignment="Stretch" Margin="0,34,-0.8,0.4" Grid.RowSpan="2"/>
And in Window.xsml.cs
FrameContent.Navigate(new HomeView());
And the navigation bar looks like this:
Is there any way of changing the default look of this bar? Or is the only option to create a new one?
In my WPF app I created my own, The simplest version of it was like:
<Grid VerticalAlignment="Top" Height="50" Background="DarkGray">
<StackPanel Orientation="Horizontal">
<Button Content="Back" Click="Back_Btn"/>
<Button Content="Next" Click="Next_Btn"/>
</StackPanel>
</Grid>
In code behind:
private void Next_Btn(object sender, RoutedEventArgs e)
{
if (this.NavigationService.CanGoForward)
NavigationService.GoForward();
else
NavigationService.Navigate(new HomeView());
}
private void Back_Btn(object sender, RoutedEventArgs e)
{
if (this.NavigationService.CanGoBack)
NavigationService.GoBack();
else
NavigationService.Navigate(new HomeView());
}
If you want you can design the buttons with materialdesign package from NuGet for example.
The MVVM version of it is more complex.
There is a way to change the default look of the bar.
Have the xaml file with the frame open.
Open the document outline window.
(From the Visual Studio Toolbar: View => Other Windows => Document Outline)
In the Document Outline window right click on the frame to display a context menu.
Select from the context menu: Edit Template => Edit a Copy...
Press OK on the Create Style Resource window.
Change the contents of Window.Resources to your liking.
I have developed an app in which I have more than one page in flipview.
now I want to stop the swipe navigation on touch only. i have used Isenabled property but
This will disable the content of the flipview as well, I just wanted to disable its navigation but allow the user to interact with its content because I have need to drag and drop and also zoom-in and zoom-out with its content.
please help me in solving the problem.
You can try this method by setting the ManipulationMode as TranslateX and put the code below inside your FlipView:
xaml:
<FlipView Width="300" Height="300" Name="MyFlipView">
<FlipViewItem ManipulationMode="TranslateX" ManipulationDelta="FlipViewItem_ManipulationDelta">
<Image Source="Assets/1.jpg" ></Image>
</FlipViewItem>
<FlipViewItem ManipulationMode="TranslateX" ManipulationDelta="FlipViewItem_ManipulationDelta">
<Image Source="Assets/2.jpg" ></Image>
</FlipViewItem>
</FlipView>
code behind:
private void FlipViewItem_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (e.Delta.Translation.X != 0)
{
e.Handled = true;
}
}
In order to disable the swipe navigation of FlipView on touch without affecting the FlipViewItem content, please override the ControlTemplate and change ManipulationMode as None in ItemsPresenter and put the code below inside your FlipView:
<FlipView.Template>
<ControlTemplate>
<ItemsPresenter ManipulationMode="None"></ItemsPresenter>
</ControlTemplate>
</FlipView.Template>
I have tested it and it works OK.
If there is no Modeless option(?) is there another way to make a small movable informational Dialog/Window/Page on top of my page. I need to keep this up as a reference but have it be movable so the underlying information can be revealed. Visual Studio 2015, Future Store App. Thanks.
You can't make the standard dialog modeless. To achieve what you want you should use a custom panel on top of your page with manipulation events hooked up to it. For example:
<Grid x:Name="LayoutRoot">
<!-- some other content -->
<Grid x:Name="Dialog" Background="Red" Width="200" Height="100"
ManipulationMode="All" ManipulationDelta="Dialog_OnManipulationDelta">
<Grid.RenderTransform>
<CompositeTransform x:Name="DialogTransform" />
</Grid.RenderTransform>
</Grid>
</Grid>
And code behind:
private void Dialog_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs args)
{
DialogTransform.TranslateX += args.Delta.Translation.X;
DialogTransform.TranslateY += args.Delta.Translation.Y;
}
Then you can build more complicated logic like show/hide animations, close buttons, etc.
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}">