I'm currently devloping an App for WP8 and am having a Problem when navigating Panorama or Pivot-Views.
For example:
I have a Panorama which itself contains a few Buttons on every Page. If I try to navigate between those Pages, I sometimes accidentally manage to Raise a Click-Event for some Buttons.
After trying to reproduce the bug, I found out, that this mainly happens when I swipe over a short distance. If I swipe long distance, the bug doesn't appear and no event is raised.
I am using Command Binding for Eventhandling, should I maybe change this? I'm really trying to figure this out, but I still can't find a way other than a Service which disables all Events if a swipe occurs.
Thanks in advance for any Help you can give me!
PS: Here is some code, don't know if/how it might help:
<phone:Panorama x:Name="Panorama" Title="{Binding LocalizationService.Resources.ApplicationTitle}">
<phone:PanoramaItem Header="{Binding LocalizationService.Resources.MainPage_Header}" HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
...
<Button Command="{Binding CmdNavigateToZipSearch}" Style="{StaticResource PizzaButtonAccentStyle}" Width="214" Height="172">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/Assets/icon_plz-suche.png" Stretch="Uniform" Height="77" Margin="1,6,0,0" />
<TextBlock Grid.Row="1" Text="{Binding LocalizationService.Resources.MainPage_ZipSearch_Label}" Style="{StaticResource PizzaTextContrastStyle}" />
</Grid>
</Button>
...
Internally (AFAIK) the command on a button is fired based on a click event. Instead of using the click/command event use an EventToCommand solution to bind your command to the Tap event as this cannot be fired at the same time as a swipe due to it's threshold of movement.
Related
This is my first question here :)
I'm not a professional programmer, I'm only 18 and I haven't studied at university or anything, so please don't hate me if I say something stupid :p
I'm making (or rather trying to make...) an app for Windows 10 UWP and a piece of my xaml code looks like this:
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="12"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="12"/>
</Grid.RowDefinitions>
<Rectangle Margin="0" Grid.Row="1" Fill="White" RadiusX="7" RadiusY="7"/>
<Grid Grid.Row="1" Margin="12,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel>
<TextBox x:Name="textProduct" Margin="0,6,6,6" TextWrapping="Wrap" VerticalAlignment="Top" BorderBrush="#FFCECED2" FontFamily="Segoe UI Light" FontSize="17" PlaceholderText="Produkt..." BorderThickness="1"/>
</StackPanel>
<StackPanel Grid.Column="1">
<TextBox x:Name="textAdditionalInfo" Margin="6,6,0,6" TextWrapping="Wrap" VerticalAlignment="Top" BorderBrush="#FFCECED2" FontFamily="Segoe UI Light" FontSize="17" PlaceholderText="Dodatkowe info..." BorderThickness="1"/>
</StackPanel>
</Grid>
I also have an app bar at the bottom with Add and Delete buttons. I'd like to be able to dynamically add another line of TextBoxes to both StackPanels every time the user presses the Add button and Delete one every time they hit the Delete button. Unfortunetely I have no idea how to achieve this. I've tried to find an answer and I think this can be done by using UserControl, however I have no idea how to implement this.
I hope it's not too comlicated to do, because I don't want to seeem like a person that asks other people to do all my work for me...
If it's a big problem, then it doesn't even need to support deleting the TextBoxes.
I hope you understand what I mean. I'm not native english so sorry for any mistakes ;)
Welcome to XAML, it's well worth the time learning it!
For displaying data XAML has something smart called DataBinding. The general concept is you bind a List (for example all strings you want to display in your StackPanel) to an element in the view. Now whenever you modify that list, the view automatically adapts. StackPanel does not support Binding, but for example ListView does (as seen below)
How about you take a look at this for basic informations about databinding: https://blogs.msdn.microsoft.com/jerrynixon/2012/10/12/xaml-binding-basics-101/
With this in mind, you can do something like this:
<!-- insert at the top -->
<Page.Resources>
<DataTemplate x:Name="MyDataTemplate">
<TextBlock Text="{Binding } />
</DataTemplate>
</Page.Resources>
<!-- insert where you want the list to appear -->
<ListView x:Name="ListView" ItemTemplate="{StaticResource MyDataTemplate}" ItemsSource="{Binding MyCollection}" />
The only hard part for you will be to bind the list to the ListView, but I'm sure you can do it with the tutorial from above ;)
Alernatively, you can name your StackPanel with x:Key="MyStack", and add the items manually:
MyStack.Children.Add(new TextBlock() {Text = "myText"});
However, I can really recommend you to do the DataBinding approach, as it makes interacting with the UI so much easier in bigger projects.
I have a WPF application running on a Windows 8.1 tablet using touch. After a whole lot of reading about how to solve some common touch specific problems I found this tutorial that really pointed me in the right direction.
My problem is that after implementing the tutorial my ScrollViewer stopped working unless I scroll directly from the scroll bar itself.
this is how my ScrollViewer (which is the top element in my window) looks like:
<ScrollViewer CanContentScroll="True" PanningMode="Both">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock HorizontalAlignment="Center"
FontSize="48"
Text="{Binding SelectedView.ViewHeader}"
TextAlignment="Center"
TextWrapping="Wrap" />
<Separator Margin="0,25" />
</StackPanel>
<ContentPresenter Grid.Row="1"
Margin="10,0,0,30"
Content="{Binding SelectedView}" />
</Grid>
</ScrollViewer>
Any suggestions on how to fix it?
EDIT:
The reason I chose the method above over the one suggested above is because it eliminated many controls focus problems I was having such as textboxes the need 2 or 3 touches to receive focus or comboboxes that stay open after selecting an item:
When using this method DisableWPFTabletSupport. You are disabling all tablet support which include ScrollViewer Touch screen. See my post in this link to achieve similar behavior (show/hide windows keyboard) without disabling tablet support.
Show & hiding the Windows 8 on screen keyboard from WPF
I have a ListBox which show several images, every image has two status SELECTED and UNSELECTED.
Switching from one status to another makes the image change url - the IDEA is like a Radio Buttons
No action when a user click on a SELECTED image.
When a user click another UNSELECTED that image will be SELECTED and the previosly one will go in UNSELECTED.
Now in my code in Floors_SelectionChanged I am able to handle this scenario, my problem is when the application start I need PRE-SELECT and image.
I would need to know:
If this approach with ListBox is appropirate component for this
scenario, any better alterantives?
How to make this PRE-SELECTION happen?
<DataTemplate x:Key="FloorsListboxDataTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextWrapping="Wrap"
Text="{Binding Description,
FallbackValue='Description'}">
</TextBlock>
<Image x:Name="FloorImage"
Grid.Row="1"
Source="{Binding ImageUrlCurrent}"/>
</Grid>
</DataTemplate>
<Custom:SurfaceListBox x:Name="FloorsSurfaceListBox"
SelectionChanged="Floors_SelectionChanged"
Loaded="FloorsSurfaceListBox_Loaded"
ItemTemplate="{DynamicResource FloorsListboxDataTemplate}">
The proper approach for most WPF applications is MVVM design
Can you set SelectedIndex = 0 when your ListBox's Loaded event is fired? IF you're using x:Name on ListBox, can you call listbx.SelectedIndex = 0 when your custom control's Loaded event is fired?
This doesn't actually describe what I mean, but I'll try to explain. I've been using C# for an year now and never touched WPF. Only recently I've realized how awesome it is and started using it. I'm now facing a problem.
I want to let the user know the password/username are incorrect, so instead of the old WinForms MessageBox I want to make it more pleasent. I thought about creating a grid that tints the application darker, and then I'll be able to show some text on it. However - how's that possible?... Do you have any nicer ideas to show a message for the application (not a popup)? Thanks.
You can create an UserControl with translucent background (like #33000000), and 3-row grid to show title, message and OK button, like bellow:
<UserControl x:Class="ApplicationNameSpace.MessageControl" ... >
<Grid Background="#33000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFFFFF" MinHeight="100" MinWidth="200">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#EEEEEE">
<Label Content="Unable to Login" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="1" Margin="10,20">
<TextBlock Text="Wrong username or password. Try again." HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
<Grid Grid.Row="2" Background="#EEEEEE">
<Button Content="OK" Width="80" Height="25" />
</Grid>
</Grid>
</Grid>
</UserControl>
To use, you can add the control at the end of your window, and change the visibility to Visible when needs to show it.
<Window x:Class="ApplicationNameSpace.MainWindow"
xmlns:local="clr-namespace:ApplicationNameSpace" ... >
<Grid>
...
<local:MessageControl Name="messageControl" Visibility="Collapsed" />
</Grid>
</Window>
You can also create a generic control that you pass to a show method the title and message content, like MessageBox show method. You can also add the user control element programmatically in the window in this method.
You can use the validation and the INotifyDataError which is on WPF 4.5 and you can show a nice message next to the textbox check this link for example
I'm trying to do news app for windows store with c# and xaml..
In this project, I created a Panorama GridView like windows phone 8.. And inside of this Panorama GridView, I created small gridviews for cathegories..
Structure is like this in Document Online;
-<Grid> (whole page)
-<Grid> (Header/Logo etc.)
-<PanoramaGridView> (All cath will be under of this)
-<HotNewsGridView>
-<HotNewsGrid>
-<GroupHeaderTextBlock>
-<HotGridView>
-<SportNewsGridView>
-<PoliticsGridView>
-<GalleryGridView>
And first side of code..
<GridView x:Name="PanoramaGridView"
Grid.Row="1"
Style="{StaticResource GridViewStyle1}"
ItemContainerStyle="{StaticResource GridViewItemStyle2}">
<GridViewItem Margin="0,0,2,0" VerticalAlignment="Top">
<Grid Margin="30,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition/>
</Grid.RowDefinitions>
<GridView x:Name="HotNewsGrid"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource MansetItemTemplate}"
Grid.Row="1"
SelectionChanged="HotNewsGrid_SelectionChanged"/>
<TextBlock x:Name="GroupHeaderTextBlock"
HorizontalAlignment="Left"
Margin="0,0,-7,-18"
Grid.RowSpan="1"
TextWrapping="Wrap"
Text="Hot News"
Foreground="DarkGreen"
VerticalAlignment="Top"
Style="{StaticResource SubheaderTextStyle}"/>
</Grid>
The problem is, I cannot scroll when my mouse cursor come on the "HotNewsGrid" grid. I can only scroll from top and bottom of the application..
I think, my PanoramaGridView is okay with scrolling but when my cursor comes subgridviews (like hot news gridview) it stops scrolling, cannot scroll from it. I tried to put IsSwipeEnable, ScrollViewer.HorizontalScrollMode="Enabled" etc.. Did not worked..
I do not want scrolling the "HotNewsGrid". I just want to continue scrolling when my cursor comes on it..
I hope you understand me.. This is a very big problem for me..
Waiting your helps..
Thank you..
Add this Template to your GridView
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
and you will be able to scroll using a mouse.
Note that a side effect of this is that you can no longer swipe select on your GridView