I have the following code which I found from here:
private void Grid_ManipulationStarted_1(object sender, ManipulationStartedRoutedEventArgs e)
{
initialpoint = e.Position;
}
private void Grid_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (e.IsInertial)
{
Point currentpoint = e.Position;
if (currentpoint.X - initialpoint.X >= 500)//500 is the threshold value, where you want to trigger the swipe right event
{
System.Diagnostics.Debug.WriteLine("Swipe Right");
e.Complete();
}
}
}
And my Xaml:
<Page
x:Class="MyApp.DetailPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Viewbox x:Name="MainViewbox" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1, 1, 1, 1" ManipulationDelta="Grid_ManipulationDelta_1" ManipulationStarted="Grid_ManipulationStarted_1">
<Grid ManipulationDelta="Grid_ManipulationDelta_1" ManipulationStarted="Grid_ManipulationStarted_1" Background='Transparent'>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="IDAndTitleTxt" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" TextAlignment="Center" Height="Auto" Width="Auto" FontSize="20" Foreground="White"/>
<TextBlock x:Name="IssueType" HorizontalAlignment="Center" VerticalAlignment="Top" Text="Code Defect" MaxHeight="10" Height="Auto" Width="Auto" Foreground="White" FontSize="4"/>
<TextBlock x:Name="UserAssignedTo" HorizontalAlignment="Center" VerticalAlignment="Top" Height="Auto" Width="Auto" Grid.Row="3" Foreground="White" FontSize="8"/>
<TextBlock x:Name="StateSubstate" HorizontalAlignment="Center" VerticalAlignment="Top" Text="Active / In Progress" Height="Auto" Width="Auto" Grid.Row="4" Foreground="White" FontSize="8"/>
<Button x:Name="BackBtn" Content="Back" HorizontalAlignment="Left" VerticalAlignment="Top" Height="40" Width="40" Grid.RowSpan="2" Grid.Row="0"/>
<ScrollViewer Height="260" Width="200" HorizontalScrollBarVisibility="Disabled" Grid.Row="2" Canvas.Top="60" Canvas.Left="340">
<TextBlock Width="195" TextWrapping="Wrap" FontSize="5" x:Name="DescriptionTxt"/>
</ScrollViewer>
</Grid>
</Viewbox>
My problem is that both the manipulation events never fire no matter how much I swipe the screen in all directions. I've put breakpoints on the event handlers to confirm this. Someone else has already asked the same question here but there is no answers. Seeing as that question was more than 2 years ago, I'm rewriting it.
Also, my grid is inside a viewbox, which is in a page (not a window).
Any help is appreciated :).
I guess you meant a Windows Phone 8.1 runtime application? Because in silverlight it works fine.
For that you should set ManipulationMode to All for your grid. In my test it worked fine even without a background color (which is necessary in silverlight applications).
If you need just a subset of manipulations, you should use the best mode for your needs.
You need to add a background brush - eg Background="Transparent" - in order for it to receive input events.
Related
I am taking my first steps into UWP app development as I'm tired of any non-web development I do (e.g. WinForms) looking like something from 1995 no matter how I try to pretty it up.
I have been mucking around and produced using the designer, a page with an image, and a stackpanel filled with buttons. The designer view shows the stackpanel fine
And this is my XAML
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="48,10,0,0">
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" Margin="200,86,1113,247" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
</Page>
However, when I run the app, the stackpanel doesn't show up (nor do any of the buttons inside it). I'm stumped. I tried setting the stackpanel "To Front" in terms of order, but no dice. Clearly my novice skills are showing.
Help?
It may be because you are setting the position of your controls with the margin attribute.
Try to read a bit into the different layout types like Grid StackPanel or RelativePanel.
A good introduction can be found here.
Just a basic thing you can do is something like this:
<Grid>
<Grid.RowDefinitions>
<Rowdefinition Height="*"> //The * just fills in the remaining Screen space.
<Rowdefinition Height="500"> //This Row is 500px high
<Rowdefinition Height="*"> //Fills the rest of the screen (same as first row)
<Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Height="*">
<ColumnDefinition Height="500">
<ColumnDefinition Height="2*"> //Using 2* fills double the screen as *
<Grid.ColumnDefinitions>
<StackPanel Grid.Row="1"
Grid.Column="1"> //Row and Column are 0-indexed
//Elements to stack go in here
</StackPanel>
If you need more info or a bit more detailed example just tell me. I just have to wait until I'm home to have acces to UWP code.
Your problem is here:
Margin="200,86,1113,247"
The designer things the target device has far more pixels than the actual device its running on. Dont forget these are 'effective pixels' so just because your screen may be 4k doesnt mean its 4000 pixels wide in UWP terminology.
Try here for more info
https://learn.microsoft.com/en-us/windows/uwp/design/basics/design-and-ui-intro#effective-pixels-and-scaling
To fix this in your page XAML you need to specify the width and height of the design surface (d:DesignHeight="..." d:DesignWidth="...") - like this:
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
there are some editable code I'm splitting with "<--((**))-->" :
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" <--((Margin="200,86,1113,247"))--> HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
YOUR PROBLEM
you are designing (developing) resolution is bigger than target device (window)
try this:
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
heeey everyone im new to wpf and i need some help i've been trying the internet but no luck so i thought i would ask here since u help alot of people here...
my project is to make a program that can find the sum of 5 different boxes but the problem is i dont know how to use the math function to make it understand that it needs to sum the boxes hope u understand what i mean...
private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
double output1 = double.Parse(Txtbox1.Text) + double.Parse(Txtbox2.Text);
Result.Text = output1.ToString();
}
xaml
<Grid HorizontalAlignment="Left" Height="323" VerticalAlignment="Top" Width="517">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="102*"/>
<ColumnDefinition Width="127*"/>
<ColumnDefinition Width="147*"/>
<ColumnDefinition Width="141*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="32*"/>
<RowDefinition Height="43*"/>
<RowDefinition Height="38*"/>
<RowDefinition Height="35*"/>
<RowDefinition Height="40*"/>
<RowDefinition Height="33*"/>
<RowDefinition Height="35*"/>
<RowDefinition Height="35*"/>
<RowDefinition Height="32*"/>
</Grid.RowDefinitions>
<TextBox Name="Txtbox1" Grid.Column="3" HorizontalAlignment="Left" Height="32" TextWrapping="Wrap" Text="1" VerticalAlignment="Top" Width="131"/>
<TextBox Name="Txtbox2" Grid.Column="3" HorizontalAlignment="Left" Height="43" Grid.Row="1" TextWrapping="Wrap" Text="2" VerticalAlignment="Top" Width="131"/>
<TextBox Name="Txtbox3" Grid.Column="3" HorizontalAlignment="Left" Height="38" Grid.Row="2" TextWrapping="Wrap" Text="3" VerticalAlignment="Top" Width="141"/>
<TextBox Name="Txtbox4" Grid.Column="3" HorizontalAlignment="Left" Height="33" Margin="0,2,0,0" Grid.Row="3" TextWrapping="Wrap" Text="4" VerticalAlignment="Top" Width="141"/>
<TextBox Name="Result" Grid.Column="3" HorizontalAlignment="Left" Height="33" Margin="0,2,0,0" Grid.Row="7" TextWrapping="Wrap" VerticalAlignment="Top" Width="141" TextChanged="TextBox_TextChanged"/>
Your general approach is fine, but you need to trigger the calculation correctly.
You currently handle the TextChanged event of the result, but you really need to trigger on the inputs.
You can do this in several ways:
Move your event handler to the input boxes, or
Use a Command on the input boxes, or
Bind the inputs to properties of a view model, and have their setters update the output (you'll need to use INotifyPropertyChanged for this).
If none of that makes sense, then you'll just have to take some time to study more WPF.
I'm trying to make text editor for Windows (PC) in UWP but the scaling is not working, I've done the same in WPF and it worked.
The page size is set to 800x600, these are columns:
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="filename" Margin="10" Grid.ColumnSpan="2">Untitled</TextBlock>
<Border Margin="5" Grid.Row="1">
<TextBox x:Name="text" AcceptsReturn="True"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible" TextChanged="text_TextChanged"/>
</Border>
<StackPanel Grid.Row="2" Margin="3,3" Orientation="Horizontal" MinHeight="31" >
<Button x:Name="saveButton" FontSize="15" Content="Save" Margin="0,0,0,-0.125" VerticalAlignment="Top" Click="saveButton_Click" />
<Button x:Name="button" Content="Save as..." Margin="5,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="button_Click" />
<Button x:Name="loadButton" FontSize="15" Content="Read" Margin="5,0" VerticalAlignment="Bottom" Click="loadButton_Click"/>
</StackPanel>
</Grid>
Title is in 1st row, content is in 2nd, buttons (save, load) are in 3rd, it looks like grid it wouldn't exist:
That's with normal size
After size change
How do I fix it?
The page size is set to 800x600
If you've set the page size to 800x600 like this: <Page Width="800" Height="600"... it will always be 800x600 and it will not scale. If you want it to scale properly, just don't set these properties.
I assume you wanted to set the size of the app when it starts for the first time. You can approach it by setting the ApplicationView.PreferredLaunchViewSize.
Also I recommend to use the RichEditBox to display and edit text files.
I am trying to use WPF to present a report to the user. I went ahead and used the report wizard to create the chart that I wanted. My issue is that I cannot seem to get the actual chart to fill the Grid/WindowsFormsHost that it is nested in.
It seems to want to stay at whatever width and height that I stretched it to in the RDLC designer. Is there any way to set it to fill its parent when I initialize it?
Edit:
Heres my XAML:
<Window x:Class="CloudMonitor.Client.UI.Start"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Start" Height="972" Width="1315"
xmlns:convert="clr-namespace:CloudMonitor.Client.Convert"
xmlns:rv="clr-namespace:Microsoft.Reporting.WinForms;assembly=Microsoft.ReportViewer.WinForms" >
<Window.Resources>
<convert:ConnectionStatusConverter x:Key="ConnectionStatusConverter"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=".9*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<Grid x:Name="ReportGrid" Grid.Row="0">
<WindowsFormsHost >
<rv:ReportViewer x:Name="_reportViewer"/>
</WindowsFormsHost>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="InitializeHubButton" Grid.Column="0" Content="Init Hub" Width="50" Height="20" HorizontalAlignment="Center" Click="InitializeHubButton_OnClick"></Button>
<Button x:Name="SendSimpleHailButton" Grid.Column="1" Content="Simple Hail" Width="90" Height="20" HorizontalAlignment="Center" Command="{Binding SendTestHail}" ></Button>
</Grid>
<Rectangle Fill="{Binding IsConnected, Converter={StaticResource ConnectionStatusConverter}}" Grid.Column="1" HorizontalAlignment="right" Height="20" Stroke="Black" VerticalAlignment="Bottom" Width="20"/>
</Grid>
</Window>
You need to create a Usercontrol and put the Report Viewer there then set it to your Grid.
Try replace this line from Window Definition:
Title="Start" Height="972" Width="1315"
With this:
Title="Start" d:DesignHeight="972" d:DesignWidth="1315"
I'm creating simple touch-based user comtol web browser. I'm using ManipulationDelta event to pan, zoom-in, zoom-out etc. The browser (Awesomium WebControl) is placed inside a grid of control. When I try to scroll page whole browser moves. How to supress invoking parent's event by childen?
I've set userinput type to ViewInput.Mouse because I want to handle touch by myself.
XAML:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:awe="http://schemas.awesomium.com/winfx" x:Name="_control" x:Class="WebControlTouch.WebBrowser"
mc:Ignorable="d" d:DesignWidth="497" Height="323.333">
<Grid TouchDown="_mainGrid_TouchDown" x:Name="_mainGrid" Background="Honeydew" Grid.Row="0" Margin="0,0,-66,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="466*"/>
<ColumnDefinition Width="8*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="84*"/>
<RowDefinition Height="7*"/>
<RowDefinition Height="220*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<awe:WebControl TouchDown="_browser_TouchDown" Visibility="Visible" LoadingFrameFailed="_browser_LoadingFrameFailed" LoadingFrameComplete="_browser_LoadingFrameComplete" LoadingFrame="_browser_LoadingFrame" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="_browser" AddressChanged="_browser_AddressChanged" Width="Auto" Height="Auto" Grid.Row="2" Grid.Column="1" Margin="0,0,1,0"/>
<TextBox Grid.Row="0" HorizontalAlignment="Left" Name="_addressBar" Height="43" Margin="0,10,0,0" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Width="146" Grid.ColumnSpan="2"/>
<Button x:Name="_goButton" Grid.Row="0" TouchDown="Button_TouchDown" Content="Go!" HorizontalAlignment="Left" Margin="131,10,0,0" VerticalAlignment="Top" Width="132" RenderTransformOrigin="-0.164,0.514" Height="43" Click="Button_Click" Grid.Column="1"/>
<Button TouchDown="Btn_back" x:Name="_btnBack" Content="Back" Click="Btn_back" HorizontalAlignment="Left" Margin="276,10,0,0" VerticalAlignment="Top" Width="75" Grid.Column="1" Height="20"/>
<Button TouchDown="_btn_forward" x:Name="_btnForward" Content="Forward" HorizontalAlignment="Left" Margin="365,10,0,0" VerticalAlignment="Top" Width="75" Click="_btn_forward" Grid.Column="1" Height="20"/>
<Label x:Name="_Status" Content="Ready" Margin="277,42,130,16" VerticalAlignment="Center" Grid.Column="1" Height="26"/>
<Button x:Name="_exitButton" Content="Exit!" Grid.Column="1" HorizontalAlignment="Left" Margin="365,45,0,0" VerticalAlignment="Top" Width="75" TouchDown="_exitButton_TouchDown"/>
<Button x:Name="_temp" Content="Scroll" Grid.Column="1" HorizontalAlignment="Left" Margin="459.312,10.04,0,0" VerticalAlignment="Top" Width="75" Click="_tempClick"/>
</Grid>
</UserControl>
This means you want some event(s) to stop bubbling (up) the control hierarchy.
All you should usually need to do is marked the event as handled (the event instance you get in your event handler):
e.Handled = true;
In your case should be something like:
private void _browser_TouchDown(object sender, TouchEventArgs e)
{
//...
e.Handled = true;
//...
}