I have this puzzle game where I can movie pieces on the playfield.
I recently added a touchscreen way to do that, it works, but there is an issue.
When I move an image from one place to another, the dragged image is in the background, the other images are in the foreground, I would like to have it the other way, see Screenshot. 1
My delta function is this:
public void Touch_Delta(object sender, Windows.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs e)
{
Image img_touched = (Image)sender;
TranslateTransform _Transform = (img_touched.RenderTransform = (img_touched.RenderTransform as TranslateTransform) ?? new TranslateTransform()) as TranslateTransform;
_Transform.X += e.Delta.Translation.X;
_Transform.Y += e.Delta.Translation.Y;
if(_Transform.X > 90.0)
{
img_touched.RenderTransform = null;
Move_Right(this, null);
}
else if(_Transform.X < -90)
{
img_touched.RenderTransform = null;
Move_Left(this, null);
}
else if (_Transform.Y > 90.0)
{
img_touched.RenderTransform = null;
Move_Down(this, null);
}
else if (_Transform.Y < -90.0)
{
img_touched.RenderTransform = null;
Move_Up(this, null);
}
Rotate_Touch += e.Delta.Rotation;
if(Rotate_Touch > 55.0)
{
Rotate_Right(this, null);
Rotate_Touch = 0;
}
else if(Rotate_Touch < -55.0)
{
Rotate_Left(this, null);
Rotate_Touch = 0;
}
}
The corresponding XAML is this:
<UserControl
x:Class="PictureSplitter.Views.PictureView"
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"
d:DesignHeight="768"
d:DesignWidth="1024">
<Grid Height="1000" Width="600" Background="Black">
<GridView ItemsSource="{Binding Splitter.PuzzlePositions}" Background="Black">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF888E91" BorderThickness="2" Background="Black">
<Grid Name="picGrid" Background="Black" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="{Binding Piece.ImageSource}" Tapped="Image_Tapped" ManipulationMode="All" CanDrag="False" Loaded="Load_Events" />
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</UserControl>
I know there is a zindex in the Windows.Canvas thing, but I haven't found something similar here. Is there a way to do this?
Well normally if there is no z-index the elements will follow the z order they were written/generated - I guess if you try to move the 3rd element onto the 2nd one it'd be on top of it :)
Now without using canvas I don't think you can do this, because even the new Transform3D stuff respects the original Z order, so if you'd move one item "above" the others (translate-z: +1) it would still be drawn behind the next ones.
With all this: use a canvas - It's better for a game anyway ;)
Related
I'm trying to get the positions of controls (buttons) but it keeps returning {0;0}. I'm sure there's an explanation for this, but I can't figure out why this happens.
I want the position of the control, relative to the window or a certain container. My buttons are arranged in another grid. Taking the margins of these buttons would just give 0,0 since they're all inside grid cells.
What I tried:
- var point = btnTest.TransformToAncestor(mainGrid).Transform(new Point());
- UIElement container = VisualTreeHelper.GetParent(btnTest) as UIElement;
Point relativeLocation = btnTest.TranslatePoint(new Point(0, 0), mainGrid);
I tried this with a grid as a parent and with a canvas. Everything I try gives me {0,0}. When I change the new Point parameters, the position does change. It stays the same as the parameters.
Small part of my XAML:
<Grid x:Name="mainGrid">
<Grid Name="buttonGrid" Margin="105,64,98.4,97.8">
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnTest" Grid.Row="0" Grid.Column="0" Content="Button" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="26" Height="29"/>
<Button x:Name="btnTest2" Grid.Row="1" Grid.Column="1" Content="Button" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="26" Height="29"/>
</Grid>
</Grid>
Your code works perfectly fine, it is the timing that is the issue. The UI elements must be drawn before the position can be retrieved.
The code sample below shows the point extraction running in the constructor with the result 0,0 and then running in the loaded event which returns the desired result 84,78.
<Window x:Class="WpfApp7.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
<Grid x:Name="mainGrid">
<Button x:Name="btnTest" Content="TileButton" HorizontalAlignment="Left" Margin="84,78,0,0" VerticalAlignment="Top" Width="109" Height="103"/>
</Grid>
public MainWindow()
{
InitializeComponent();
GetPoint();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
GetPoint();
}
private void GetPoint()
{
var point = btnTest.TransformToAncestor(mainGrid).Transform(new Point());
UIElement container = VisualTreeHelper.GetParent(btnTest) as UIElement;
Point relativeLocation = btnTest.TranslatePoint(new Point(0, 0), mainGrid);
MessageBox.Show($"X = {relativeLocation.X} Y = {relativeLocation.Y}");
}
I need to make list of images which is scrollable along vertical axis.
Images' links are in string[] imagesLocation.
When tile is clicked, event handler should know string imageLocation.
It shoul look something like this:
I was able to make it in grid. But couldn't make it scrollable.
Found some tip to use LongListSelector, but couldn't make it to work.
Update:
MainPage.xaml.cs:
namespace PhoneApp1
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
ContentPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
ContentPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength() });
ContentPanel.RowDefinitions.Add(new RowDefinition() { Height = new GridLength() });
ContentPanel.Children.Add(new TextBlock() { });
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < 5; j++)
{
Image MyImage1 = new Image();
MyImage1.SetValue(Grid.ColumnProperty, i);
MyImage1.SetValue(Grid.RowProperty, j);
ImageSource src = new BitmapImage(new Uri(string.Format("Assets/ApplicationIcon.png"), UriKind.RelativeOrAbsolute));
MyImage1.Source = src;
ContentPanel.Children.Add(MyImage1);
}
}
}
}
}
MailPage.xaml:
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid Grid.Row="1" x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160"></ColumnDefinition>
<ColumnDefinition Width="160"></ColumnDefinition>
<ColumnDefinition Width="160"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
I thought of an easy solution which you could try.
Insert a Panel first and then create the grid inside the panel
The panel has a property called AutoScroll You just have to set that to True
panel.AutoScroll = "True";
WrapPanel is great for laying out things in a vertical or horizontal orientation until you reach the edge of the container and then move to the next column or row. But unfortunately I found WrapPanel is no longer supported by Windows Store apps (Universal Apps).
UniversalWrapPanel is an alternative for WrapPanel layout.
This is considering you're working on Visual Studio
To get the UniversalWrapPanel, go to the package manager, find and install Package UniversalWrapPanel This will add the DLL in your references.
Then Open MainPage.xaml and add the namespace to the XAML:
xmlns:UniversalWrapPanel="using:Gregstoll"
I want to make a storyboard for RowDefinition changing the Height, and I found this to help me. The only problem when I want to create the class GridLengthAnimation, I cannot make it a AnimationTimeline. Is this because windows phone 8 does not support this?
In this case is there another work around for making a storyboard for RowDefinition?
Easiest way may be that you put grids to the rows, and animate their Height-property like this.
Here is the xaml:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Background="AliceBlue"
Grid.Row="0"
Height="100"
Tap="Grid_Tap"
CacheMode="BitmapCache" />
<Grid Background="AntiqueWhite"
Grid.Row="1"
Height="100"
Tap="Grid_Tap"
CacheMode="BitmapCache" />
<Grid Background="Aqua"
Grid.Row="2"
Height="100"
Tap="Grid_Tap"
CacheMode="BitmapCache" />
<Grid Background="Aquamarine"
Grid.Row="3"
Height="100"
Tap="Grid_Tap"
CacheMode="BitmapCache" />
</Grid>
And the cs:
private void AnimateHeight(Grid grid)
{
double newHeight = grid.ActualHeight == 100 ? 300 : 100; //select the height we want to animate
Storyboard story = new Storyboard();
DoubleAnimation animation = new DoubleAnimation();
animation.To = newHeight;
animation.Duration = TimeSpan.FromSeconds(0.5);
Storyboard.SetTarget(animation, grid);
Storyboard.SetTargetProperty(animation, new PropertyPath(Grid.HeightProperty));
story.Children.Add(animation);
story.Begin();
}
private void Grid_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
Grid grid = sender as Grid; //select the grid we tapped
AnimateHeight(grid);
}
Notice that I putted cachemode to bitmapcache all of the grids. That's not necessary, but gives more fluent animation, because static grids won't be redrawed again in each frame.
I have this Grid in my WPF application :
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="70" Name="BarRowDef" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Name="BarGrid" Grid.Row="0" Height="70" VerticalAlignment="Top" Background="#FF802C2C">
<Button Content="History" Focusable="False" Width="100" Height="60" HorizontalAlignment="Left" VerticalAlignment="Center" Name="HistoryButton" Click="HistoryButton_Click"/>
</Grid>
<Grid Name="MiddleGrid" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<WebBrowser HorizontalAlignment="Stretch" Name="Browser" VerticalAlignment="Stretch" LoadCompleted="Finish_Load" Grid.Column="1"/>
</Grid>
</Grid>
And i want to the browser will have full screen option. So what i done is in the event Of EnterFullscreen is called is :
BarRowDef.Height = new GridLength(0);
And what happen is that the Browser start from the top of the page but in the bottom i have a white space in the size of BarGrid.
Any idea what can be the problem?
Edit
This is the full EnterFullScreenMode method :
public void EnterFullScreenMode()
{
BarRowDef.Height = new GridLength(0);
if (this.WindowState == System.Windows.WindowState.Maximized)
{
this.WindowState = System.Windows.WindowState.Normal;
}
this.WindowStyle = System.Windows.WindowStyle.None;
this.WindowState = System.Windows.WindowState.Maximized;
IsFullScreen = true;
}
I believe setting to Visibility.Hidden can still result in some whitespace being rendered.
You can set the content of the row (BarGrid) to Collapsed, which means: "Do not display the element, and do not reserve space for it in layout".
BarGrid.Visibility = Visibility.Collapsed;
Edit: Additional details from comments
Also ensure the height setting removed from the RowDefinition.
Instead of:
<RowDefinition Height="70" Name="BarRowDef"/>
Use:
<RowDefinition Height="Auto"/>
I am not sure what do you mean, EnterFullscreen event of what?
You can try this:
BarGrid.Visibility = Visibility.Hidden;
instead of:
BarRowDef.Height = new GridLength(0);
I have a XAML with 2 columns in a Grid and I have a button that when I click it, in the code behind, I set the visibility to collapse, and want to resize the other half of the screen to try to take up the whole screen. The collapsing part works, and the RHS then shifts over to the LHS, but it does not take up the entire screen. I tried using both the Auto and Star to resize in HidePlots, but it never takes the full screen. I thought if I collapsed the LHS, and set the column to * for the RHS, it would take up the whole screen. Any thoughts? Thanks.
Here's some code to make it more clear:
<Grid Grid.Row="1" x:Name="ExpandableGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="TableGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0" x:Name="SampleViewGroupBox" Header="SampleView" HorizontalAlignment="Stretch" FontFamily="Arial" FontSize="12" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.SampleView}" Height="Auto" Width="Auto"/>
</GroupBox>
<Button x:Name="TableButton" HorizontalAlignment="Right" Content="Button" Width="15" Height="15" VerticalAlignment="Top" Margin="0,0,-2,0" Click="MaxButton_Click" Grid.Column="0" Grid.Row="0"/>
</Grid>
<Grid Grid.Column="1" x:Name="BaseViewGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.RowSpan="2" Grid.Column="1" Name="BaseViewGroupBox" Header="PLOTS" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.ConsensusView}" Height="Auto" Width="Auto" />
</GroupBox>
</Grid>
</Grid>
private void MaxButton_Click(object sender, RoutedEventArgs e)
{
UIElement senderElement = (UIElement)sender;
if (_tableMinimized)
{
HideTables(false);
_tableMinimized = false;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButton");
}
else
{
HideTables(true);
_tableMinimized = true;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButtonReverse");
}
}
private void HideTables(bool hide)
{
if (hide)
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Collapsed;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = GridLength.Auto;
ExpandableGrid.ColumnDefinitions[1].MinWidth = 500;
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = GridLength.Auto;
TableButton.Visibility = Visibility.Visible;
}
else
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Visible;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = new GridLength(1, GridUnitType.Star);
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = new GridLength(1, GridUnitType.Star);
}
}
Edit: I tried to also change one line to:
ExpandableGrid.ColumnDefinitions[1].MinWidth = System.Windows.SystemParameters.PrimaryScreenWidth-20;
instead of the hard-coded 500 value, it looks correct. However, if I try to click the button again to revert back to normal, the RHS takes up the bulk of the screen without getting back to its original position.
Your current column definition says to make Column B equal to 1.5 times the size of Column A, so even if ColumnB's content is hidden, the column will still take up 3/5 of the screen.
Change it so the column that collapses has a Width="Auto", and set it's Content's Width equal to whatever size it should be when it's expanded. If you want to keep the 1.5* default width, I'd recommend using something like a MathConverter to figure out what size it should be based on the parent Grid's width. I have the code for one posted here
<Grid x:Name="ParentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="RHS" Grid.Column="0" />
<!-- Collapse this Grid -->
<Grid x:Name="LHS" Grid.Column="1"
Width="{Binding ElementName=ParentGrid, Path=ActualWidth,
Converter={StaticResource MathConverter},
ConverterParameter=((#VALUE/5)*3)}" />
</Grid>
You need to set column 0 to be whatever you desire (Auto, 150, etc...) and set column 1 to be *.
It looks like your Grid is also within a Grid, so the parent's behavior also has to be taken into account.