I want to be able to individually figure out which children grids are tapped as part of a larger grid. Each of the children grid are in individual columns and rows, I'm trying to do something simple where I handle individual grids being tapped through different event handlers. What am I doing wrong? I can only get the entire grid to fire an event handler when it is tapped, but what I want is the event handler "row0col0_Tapped" to be fired only when that part of the 0th row and 0th column of the outer grid is tapped.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" IsTapEnabled="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid IsTapEnabled="True" Grid.Row="0" Grid.Column="0" Tapped="row0col0_Tapped">
<Canvas x:Name="row0col0"></Canvas>
</Grid>
<Grid IsTapEnabled="True" Grid.Row="0" Grid.Column="1"></Grid>
<Grid IsTapEnabled="True" Grid.Row="0" Grid.Column="2"></Grid>
<Grid IsTapEnabled="True" Grid.Row="2" Grid.Column="0"></Grid>
<Grid IsTapEnabled="True" Grid.Row="2" Grid.Column="1"></Grid>
<Grid IsTapEnabled="True" Grid.Row="2" Grid.Column="2"></Grid>
<Grid IsTapEnabled="True" Grid.Row="2" Grid.Column="0"></Grid>
<Grid IsTapEnabled="True" Grid.Row="2" Grid.Column="1"></Grid>
<Grid IsTapEnabled="True" Grid.Row="2" Grid.Column="2"></Grid>
</Grid>
Please set a transparent back ground for the the grid which is to be tapped.
<Grid IsTapEnabled="True" Background="Transparent" Grid.Row="0" Grid.Column="0" Tapped="row0col0_Tapped">
<Canvas x:Name="row0col0"></Canvas>
</Grid>
Related
I'm trying to develop an ancient form of chess, Chaturaji, as an assignment for school. I've got some very basic xaml setup that should allow me to drag and drop an image element within a grid.
<Page
x:Class="Projectg.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Projectg"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid AllowDrop="True" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition>
</ColumnDefinition>
<ColumnDefinition Width="900">
</ColumnDefinition>
<ColumnDefinition>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="900"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Background="Transparent" x:Name="grdGrid" AllowDrop="True" Grid.Column="1" Grid.Row="1" Drop="grdGrid_Drop" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image CanDrag="True" x:Name="Image" Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="0" Grid.Column="0" Source="/images/boat.png" DragStarting="Boat_DragStarting" Drop="Boat_Drop" DragOver="Image_DragOver" ></Image>
<Image CanDrag="True" Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="1" Grid.Column="0" Source="/images/horse.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="2" Grid.Column="0" Source="/images/elephant.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="3" Grid.Column="0" Source="/images/crown.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="0" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="1" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="2" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="3" Grid.Column="1" Source="/images/pawn.png" ></Image>
</Grid>
</Grid>
</Page>
When I try to drag the image over the grid the mouse shows the “Drop Not Allowed” cursor and releasing the image does not fire the Drop event. I asked a teacher about this and she said it was probably because I did not set a background for my grid.
I quickly updated the code, but no luck, the event still did not fire. She didn't really know what was going on and told me to email her if the problem persisted.
I thought I would ask here first.
Thanks in advance for any help.
A quick glance at the MSDN UWP Drag and Drop page suggests that you need to handle the DragOver event, and indicate what drop operations the control will accept (true in any form of XAML and IIRC winforms etc. as well). In UWP, that's the AccepttedOperation property on the event args object (WPF calls that property Effects and it's a different enum type):
private void Grid_DragOver(object sender, DragEventArgs e)
{
e.AcceptedOperation = DataPackageOperation.Copy;
}
What I try to achieve is being able to drag an image from one cell and drop it into another cell in the same grid. This grid in xaml is defined as below:
<Grid Grid.Row="1" HorizontalAlignment="Center" AllowDrop="True" VerticalAlignment="Center" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Margin="10,10,10,10" CanDrag="True" Grid.Row="0" Grid.Column="0" Source="Assets\mock.png" Width="64" Height="64" DropCompleted="Image_DropCompleted"/>
<Image Margin="10,10,10,10" CanDrag="True" Grid.Row="1" Grid.Column="1" Source="Assets\mock.png" Width="64" Height="64" DropCompleted="Image_DropCompleted"/>
<Image Margin="10,10,10,10" CanDrag="True" Grid.Row="2" Grid.Column="2" Source="Assets\mock.png" Width="64" Height="64" DropCompleted="Image_DropCompleted"/>
</Grid>
When I drop an image from one cell to another, Image_DropCompleted is triggered, and I can use static function in Grid to set the row and column index.
So my questions is how to calculate these indexes from current mouse position?
I have a grid with 2 rows one for a name and button and the other for output.
I want the first row to stretch the full width and the button to align to the right.
Wondering what I am missing as I thought the stackpanel would fill the width.
<Window x:Class="Sample.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 Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" >
<TextBox Name="NameTextBox" MinWidth="150" HorizontalAlignment="Stretch"/>
<Button Margin="10,0" Name="AlertButton" Content="Say Hello" HorizontalAlignment="Stretch" />
</StackPanel>
<TextBox Name="OutpuTextBox" MinLines="5" Grid.Row="1" Grid.Column="0"/>
</Grid>
</Window>
Horizontal StackPanel ignores horizontally alignment of its children. You can change your layout to 2 columns and put Button in the second column of first row and set bottom TextBox to span across 2 columns
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Name="NameTextBox" MinWidth="150" HorizontalAlignment="Stretch"/>
<Button Margin="10,0" Name="AlertButton" Content="Say Hello" HorizontalAlignment="Stretch" Grid.Column="1" />
<TextBox Name="OutpuTextBox" MinLines="5" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>
It looks simple, but it is unbelievable hard.
I want to have such layout:
It's ListView which should take a maximum height of buttons (number of visible buttons is dynamic).
I tried this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<Button/>
<Button/>
...
</StackPanel>
<ListView Grid.Column="1"/>
</Grid>
</Grid>
Problem: ListView has a very weird behavior to size self to content. If I add many items, then suddenly it takes all window space.
Question: how to limit ListView height to not exceed buttons total height (StackPanel height)?
P.S.: mvvm, so pure xaml is preferable.
P.S.S.: I have feeling it will be a binding of something to something. But of what to what?
You just need to data bind the ActualHeight of your StackPanel to the ListView.Height so that the ListView won't grow larger than the Button's StackPanel:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Name="ButtonPanel" Grid.Column="0">
<Button Content="Click" />
<Button Content="Click" />
<Button Content="Click" />
</StackPanel>
<ListView Grid.Column="1" ItemsSource="{Binding Tests}"
Height="{Binding ActualHeight, ElementName=ButtonPanel}" />
</Grid>
</Grid>
You can bind the MaxHeight property of your lower content grid to the ActualHeight of the buttons StackPanel. Futher more, you need to set the VerticalAlignment of the buttons panel to Bottom.
This way, you can add more parts in vertically, but still stick to the buttons panel height.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
<Grid Grid.Row="1"
MaxHeight="{Binding ElementName=ButtonPanel, Path=ActualHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Name="ButtonPanel"
VerticalAlignment="Bottom">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</StackPanel>
<ListView Grid.Column="1"/>
<!-- Multiple controls can be added here,
but the lower part will still stick
to the size of the buttons panel -->
</Grid>
</Grid>
I am making my first WPF window. I placed a grid onto it and divided the grid into rows and columns that resize automatically if window is resized. There are two buttons that fill two of grid's cells. The buttons contents is set to "OK" and "EXIT" respectively. What I have some difficulty to understand is why would these buttons only work if I click on the text but won't react if I click on the area that is around text and still is inside respective button. Is there a way to make it possibe to click anywhere on the button and it will press down (even if I click somewhere long way from the text)? Any help would be appreciated, thanks!
<Window x:Class="INL.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Please enter your details" Height="350" Width="350" MinWidth="350" MinHeight="350" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" WindowStyle="ToolWindow" Background="White">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="Name:"> </Label>
<Label Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Content="Last name:"></Label>
<Label Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2" Content="ID:"></Label>
<Label Grid.Column="0" Grid.Row="6" Grid.ColumnSpan="2" Content="Result:"></Label>
<TextBox x:Name="TextBoxNamn" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"></TextBox>
<TextBox x:Name="TextBoxEfternamn" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2"></TextBox>
<TextBox x:Name="TextBoxPersonnummer" Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2"></TextBox>
<TextBox x:Name="TextBoxResultat" Grid.Column="0" Grid.Row="7" Grid.RowSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" IsReadOnly="True" IsReadOnlyCaretVisible="True" />
<Button x:Name="ButtonOK" Grid.Column="1" Grid.Row="7" Content="OK" IsDefault="True" Background="{x:Null}" Click="ButtonOK_Click" ClickMode="Press"></Button>
<Button x:Name="ButtonExit" Grid.Column="1" Grid.Row="8" IsCancel="True" Content="EXIT" Background="{x:Null}" Click="ButtonExit_Click" ClickMode="Press"></Button>
</Grid>
Instead of setting Background to {x:Null}, set it to Transparent.
Setting background to {x:Null} makes surrounding area non-clickable.
Null background does not respond to mouse events.
Refer to this for more details - {x:Null} Vs. Transparent.