We Keep Coding

WPF: Data Grid not horizontally scrollable

I have following DataGrid:
<Grid Margin="10" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="Auto" MinHeight="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="150"/>
<ColumnDefinition MinWidth="300" Width="Auto"/>
<ColumnDefinition MaxWidth="30"/>
<ColumnDefinition MaxWidth="10"/>
<ColumnDefinition MaxWidth="30"/>
<ColumnDefinition MaxWidth="10"/>
<ColumnDefinition Width="*" MinWidth="400"/>
</Grid.ColumnDefinitions>
...
<ScrollViewer Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="7" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<DataGrid
ItemsSource="{Binding ExcelFileDataView, Mode=TwoWay}"
AutoGenerateColumns="True"/>
</ScrollViewer>
...
</Grid>
But when I make the app window smaller the whole window becomes horizontally scrollable instead of the DataGrid.
What do I need to do to make only the DataGrid horizontally scrollable?

Don't put the DataGrid into a ScrollViewer. It has scrollbars on its own, so move ...ScrollBarVisibility attributes to the DataGrid and everything will be fine.

Change control center in wpf

I have some label "my text".
I have some UserControl, inside it have text ("text part") and some visual part near text.
Left picture is what i want to achieve. Right is what i got.
I want center my UserControl not by its default center but by custom point.
Because "my text" may vary in length, meanwhile it should be centered relative to my controls "text part" center.
Goal ^ Current ^

You will need to define separate columns, one which is centered for your centered texts, and another one for your visual label.
The tricky part now is synchronizing one column from within the UserControl with one outside of it. You can use SharedSizeGroups for this, like in this example, I just used a ContentControl instead of the UserControl for convenience:
<Grid IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="colLeft"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="colRight"/>
</Grid.ColumnDefinitions>
<Label HorizontalAlignment="Center" Background="LightBlue">MyText</Label>
</Grid>
<ContentControl Grid.Row="1">
<Grid HorizontalAlignment="Stretch" Background="Yellow">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="colLeft"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="colRight"/>
</Grid.ColumnDefinitions>
<Label HorizontalAlignment="Center" Background="Lime">text part a little longer
</Label>
<Label Grid.Column="1">someVisualLabel</Label>
</Grid>
</ContentControl>

WP8.1 Combobox opens under other controls

I have a following problem,
my combobox on winphone8.1 opens its items under others controls.. can anybody have any solve solutions?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Combobox Grid.Row="0"/>
<TextBox Grid.Row="1"/>
<TextBox Grid.Row="2"/>
</Grid>

If you want your control to cover other items, instead of pushing them, just give your control a RowSpan. It makes the control span over multiple rows.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="1"/>
<TextBox Grid.Row="2"/>
<Combobox Grid.Row="0" Grid.RowSpan="3"/>
</Grid>
Notice that the Combobox is declared after the TextBoxes, in order to be in front of them and cover them.
On a sidenote, there's no need to explicitly set Grid.Row (or column) if it's 0 since that's its default value. So you could just ommit Grid.Row="0" on your Combobox. The same goes when setting * as height or width of a row/column defition. Can be shortened to
<RowDefinition/>

XAML Property elements

For a project I am using XAML. I have devided my screen in different parts. The moment when I add a button, I get an error.
The error:
'property elements cannot be in the middle of an element's content'
The code I am using for the button where the error has been found:
<Button x:Name="cntButton" Content="Connect" Grid.Column="1" Grid.Row="2" Click="cntButton_Click" />
Does anyone know what the problem is and how I have to solve it?
The rest of the code:
<Window x:Class="Pesten.View.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>
<Image Grid.RowSpan="4" Grid.ColumnSpan="3" Stretch="Fill" Source="pestenbg.jpg" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Button x:Name="cntButton" Content="Connect" Grid.Column="1" Grid.Row="2" Click="cntButton_Click" />
</Grid>
</Window>

You've defined an image in the grid before the grid properties. Move this to after the row and column definitions.

You're adding Button control in the wrong place of parent control:
Property elements cannot be in the middle of an element's content
Property elements cannot be in the middle of an element's content. They must be before or after the content. This error is occurs when you attempt to use property-element syntax within an element's content.
Move Image after ColumnDefinitions and before Button
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="4" Grid.ColumnSpan="3" Stretch="Fill" Source="pestenbg.jpg" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Button x:Name="cntButton" Content="Connect" Grid.Column="1" Grid.Row="2" Click="cntButton_Click" />
</Grid>
or move both Image and Button above column/row definition but you cannot split it

Put the column and row definitions directly after the opening tag. All content should follow that (i.e. the and the ).

defining row grids within a column grid

I have a grid with 3 defined columns. Is there a way to divide column 1 into 3 grid rows without affecting the other 2 columns? I've tried defining RowDefinitions, but it spans all 3 columns. I don't want that. I only want it to affect the 1 column.

No, you cannot. If you declare a Row inside Grid it will be for all the Columns.
One thing you can do is declare a Grid inside the first Column and define three rows in that Grid
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
</Grid>

You should use nested Grids. Put an inner Grid into column 1 and define some rows:
<Grid Name="outerGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Name="innerGrid" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
</Grid>

You could try this layout:
<Grid ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
</Grid>
</Grid>