Develop Reference

GridViewItem height adjust to content in Windows Phone 8.1

I am using a GridView to display some products.
When I set the DataTemplate I use Width and Height with static values and define some rows for the data I want to display.
<Grid Width="97" Height="180"">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
The first row is for a 80x80 image and the second for the price.So far, so good.
Then I face the problem that even if the data shown (with the name of the product) in the last row, with a TextBlock, is just one line, the GridViewItem takes the value defined from the height property.
Is there a way for the height to adjust on TextBlock's Text. I tried setting Height to Auto, not including at all for the Grid and the TextBlock but then the text is not appearing whole on the screen.

I have a feeling what you want is the text to wrap around. You can achieve this by setting the text to wrap, like in the code demonstrated below:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Red" />
<Grid Grid.Row="1" Background="Blue" />
<TextBlock Grid.Row="2" TextWrapping="Wrap" Text="This is some text which will not fall off the edge because it is set to wrap around, and will continue filling down until the end of the screen because the grid is set to auto" />
</Grid>

Getting the position of controls in a windows store app in C#

I want to fetch the positions of controls within a page in windows store apps in pixels.
It would be nice to be able to do it for an arbitrary control, however for the moment just figuring out how to do it for a button would be fine!
I've tried looking at margins, but they seem to often have no relation to the actual position when mechanisms like Grid.Row="x" or HorizontalAlignment="Center" are used in the Xaml or set programatically. I would need this method to work whatever the method of positioning the control is.
Thanks in advance!
EDIT:
I'm testing by setting up a UI:
<Grid x:Name="grid" Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="test" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Content="test"/>
</Grid>
and then modifying the 'Grid.Column', 'Grid.Row' and Alignment characteristics.

You can get position of control using transform object.
<Button x:Name="btn" Content="Button" Margin="131,339,0,391" />
void BlankPage4_Loaded(object sender, RoutedEventArgs e)
{
var trans = test.TransformToVisual(null);
var point = trans.TransformPoint(new Windows.Foundation.Point());
}

Xaml - How to get exact row from grid (and change background)

I have defined grid in xaml like this:
<Grid Name="grdMoney" HorizontalAlignment="Center" Margin="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
... Content, many Textboxes in each row
</Grid>
Now I just want to highlight some row by changing background in that row. But I can't find out how can I get exact row from grid in code. I think it's easy but I am googling for last 15minutes and can't find it. Maybe something with grdMoney.Childer[number_of_row]? Thanks for help

Grid is a Panel. Panels are responsible for layouting, nothing more.
If you want to update background - put content of every row to Border, and find appropriate Border like that (i wrote code here, and didn't test it, but should work):
int desiredRowId = 2;
foreach(var child in grdMoney.Children.OfType<Border>())
{
if (Grid.GetRow(child) == desiredRowId)
{
child.Background = new SolidColorBrush(Colors.Red);
}
}

I've probably'll do this in xaml using DataTriger
In data triger you can check your condition and apply appropriate background

WPF Grids - how to maintain column width when window is resized?

I have this XAML markup...
<Grid Name="ProductsGrid" Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="ProductList" Width="*" />
<ColumnDefinition Name="ProductInfo" Width="100" MinWidth="10" MaxWidth="100"/>
</Grid.ColumnDefinitions>
When the app starts the 2nd column is se to 100 "units" wide.
When the window is resized the column grows and shrinks - it maintains its ratio with column 1 which I think is what i supposed to happen in WPF. So when the app starts the window size is set to 500 and the 2nd column is 1/5 of the total width. As the app resizes it maintains 1/5 of the total width However in this example I want it to stay at 100 units.
Any ideas?

Remove the width of the grid, it is fixing the width of the grid, the grid remains 100 in width ... give the grid background color if you want to see the actual grid location.
you can fix the initial width of the main window to 100 and leave the grid without fixed width to allow the desired behavior
try this:
<Window x:Class="WpfApplication6.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="100" x:Name="MyWindow">
<Grid Name="ProductsGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="ProductList" Width="*" />
<ColumnDefinition Name="ProductInfo" Width="100" MinWidth="10" MaxWidth="100"/>
</Grid.ColumnDefinitions>

Try this
<Grid Name="ProductsGrid" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="ProductList" Width="*" />
<ColumnDefinition Name="ProductInfo" Width="100" MinWidth="10" MaxWidth="100"/>
</Grid.ColumnDefinitions>
</Grid>
You need to remove the fixed width of Grid.
If you want your initial window to be of size 500 then you can handle window loaded event and set the size of window to 500. Don't hard code size of Grid in code behind or XAML otherwise you will face same issue again
private void mywindow_Loaded(object sender, RoutedEventArgs e)
{
this.Width = 500;
}

WPF - Resizing controls within a window with resize

So I'm pretty new to WPF and I'm having trouble with the layout of my Window. Currently I have a WPF application with a Grid defined as such:
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
In the very top row, spanning two columns, I have a Menu. In the second row I have some Labels in the first column and an Image and a WindowsFormsHost in the second, finally, in the third row I have a graphing control in the second column. By default, I set the size of the Image and WFH to 570 x 413. Now, I'd like for both the Image and WFH to expand when my Window is resized such that they maintain the same relative (to the Window) size. (I actually would like the same to happen to my graphing control as well, but I can probably figure that one out if I can get the others. I cannot for the life of me figure out what setting I need to turn on/off or what I might need to bind or whatever in order to make this happen. Any help is greatly appreciated!
Thanks!

Have you tried:
<RowDefinition Height="*" />
Make sure to assign your Grid.Row within your image or control, but do not sign the controls height/width properties. The control should autosize with expansion.
Update
Did a quick test to make sure this works.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Example"/>
<Image Grid.Row="1" Source="c:\Example.jpg"/>
<Label Grid.Row="2" Content="Example2"/>
</Grid>
The image expands with the application based on the image's proportions. It does expand, but it keeps it's dimensions along with the full image in view. If you were to change the rowdefinition from ***** to Auto, you will notice that the image will expand, but it will expand past your view. Meaning you will not always see the full image.
I would suggest making a simple application like above, and playing with constraints to figure out what each does.

You need to show more information in your description, because all of the properties of the Grid and of the Image, etc. will factor into the layout.
However, you probably want to look at the HorizontalAlignment and VerticalAlignment properties of your Grid and of your Image, as well as the Stretch property of the Image. Also, you don't want to specify a fixed size for the image (you can specify a MinWidth and a MinHeight if you want them to be a certain size when starting up).
Here's a quick example that shows a grid filling a window, with a scaling image.
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="First Row" />
<Label Grid.Column="0" Grid.Row="1" Content="Column 0, Row 1" />
<Image Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="Resources\ExamplePicture.png"
Stretch="Uniform" />