how to get grid children by its row and column in wpf? - c#

<Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Width="150" Height="50" x:Name="Btn1" Content="Button1" Grid.Row="0" Grid.Column="0"/>
<Button Width="150" Height="50" x:Name="Btn2" Content="Button2" Grid.Row="0" Grid.Column="1"/>
<Button Width="150" Height="50" x:Name="Btn3" Content="Button3" Grid.Row="2" Grid.Column="0"/>
<Button Width="150" Height="50" x:Name="Btn4" Content="Button4" Grid.Row="2" Grid.Column="1"/>
</Grid>
C# code in wpf
Visual childVisual = (Visual)VisualTreeHelper.GetChild(LayoutRoot,0);
With above code i can get the First child of the grid(LayoutRoot).But i want to get grid child by it's rows or columns. What should i do for that.
Thanks in Advance.

Filter the Grid.Children based on what Grid.GetRow and GetColumn returns for every child.
e.g.
var itemsInFirstRow = LayoutRoot.Children
.Cast<UIElement>()
.Where(i => Grid.GetRow(i) == 0);

Related

How to get the parent page inside a frame?

I got a page, in which there's a frame (that contains 2 input forms, that can be switched to with 2 buttons above the form) and a listView which contains the inputs from the user. When the User finishes the input, I want to pass an Object from the frame to the parent page.
I tried getting the Parent with the Parent property, but the parent property is for some reason null. I also tried to search for a solution on the web, but I wasn't able to find anything helpful. Does anyone of you know my problem can be solved?
Parent Page:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="1" Grid.Column="1" BorderThickness="5" BorderBrush="DarkGray">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="Form1"/>
<Button Grid.Row="0" Grid.Column="1" Content="Form2"/>
<Frame x:Name="inputFrame" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Background="Black"/>
</Grid>
</Border>
</Grid>
Frame Inside the Parent Page:
<Border Grid.Column="1" Grid.Row="2" Padding="10" Background="AliceBlue" BorderThickness="5" BorderBrush="DarkSlateGray" KeyUp="textInput">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Label Content="Beschreibung:" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,10,0"/>
<TextBox x:Name="inputDesc" Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="3" Width="150" TextAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Zeit:" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" Margin="0,10,10,10"/>
<TextBox x:Name="inputHours" Grid.Column="2" Grid.Row="3" Margin="0,10,0,10" TextAlignment="Center" VerticalAlignment="Center"/>
<Label Content=":" Grid.Column="3" Grid.Row="3" HorizontalAlignment="Center" Margin="5,10,5,10"/>
<TextBox x:Name="inputMins" Grid.Column="4" Grid.Row="3" Margin="0,10,0,10" TextAlignment="Center" VerticalAlignment="Center"/>
<Button x:Name="addBtn" IsEnabled="False" Content="Hinzufügen" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="4" Margin="0, 10, 0, 10" Click="addBtnClick"/>
<TextBlock x:Name="info" Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="4" Grid.RowSpan="3" Margin="0,10,0,0" MaxWidth="150" TextWrapping="WrapWithOverflow" TextAlignment="Center" Height="40"/>
<ListView ItemsSource="{Binding items}" Name="listView" Grid.Column="3" Grid.Row="1" Grid.RowSpan="9" SelectionChanged="itemSelected" Background="WhiteSmoke">
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Desc}" Header="Beschreibung"/>
<GridViewColumn DisplayMemberBinding="{Binding Time}" Header="Zeit"/>
<GridViewColumn DisplayMemberBinding="{Binding Date}" Header="Datum"/>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Border>
I found out how this can be solved:
You just give a reference of the parent page to the page in the frame through the constructor, like this:
private void changeToForm1(object sender, RoutedEventArgs e)
{
inputFrame.Content = new Form1(this);
}
Now, you can just save the reference into a variable and call methods to transfer the data to the parent page.

Fix an image at top right corner of wpf window irrespective of the height of grid row

I have to place an image on top right corner of grid. But it should not take the height of grid row. Means it should appear as a top layer of grid. How can I achieve this?
Doing like below, the height of grid row is increases as the height of image (Img_Data).
<Grid x:Name="LayoutRoot" Background="Black" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel x:Name="menu" Grid.Row="0" Grid.ColumnSpan="3" >
<Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Click="btnOpen_Click" Width="auto" Height="25"/>
<Button Margin="8" Width="100" Height="28" Content="Play" BorderBrush="Transparent" Name="btnPlay" Click="btnPlay_Click" Style="{StaticResource CommonButton}" >
</Button>
<Label x:Name="lblRecordTimer" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
<Label x:Name="lblPlayMode" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label>
<Image Name="Img_Data" Source="/images/Data.png" HorizontalAlignment="Right" Width="187" Height="150" />
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Center">
<Label Content="Show Details" FontSize="18" Foreground="White" ></Label>
<fa:ImageAwesome Icon="Refresh" Foreground="Red" Visibility="Collapsed" Width="50" Height="50" x:Name="spinner1" Spin="True" SpinDuration="4" />
</StackPanel>
</Grid>
You can use Canvas as last child of your Grid. Like this:
<Grid x:Name="LayoutRoot" Background="Black" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel x:Name="menu" Grid.Row="0" Grid.ColumnSpan="3" >
<Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Width="auto" Height="25"/>
<Button Margin="8" Width="100" Height="28" Content="Play" BorderBrush="Transparent" Name="btnPlay">
</Button>
<Label x:Name="lblRecordTimer" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
<Label x:Name="lblPlayMode" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label>
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Center">
<Label Content="Show Details" FontSize="18" Foreground="White" ></Label>
</StackPanel>
<Canvas
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="3">
<Image
Name="Img_Data"
Canvas.Top="16"
Canvas.Right="16"
Source="/images/Data.png"
Width="187"
Height="150"/>
</Canvas>
</Grid>

Prism mvvm - TabControl does not display data

I'm using Prism. I have a ContextControl region, and a view associated with that region. Within the view is a TabControl. The controls are displaying data with no problem, but the controls within the TabControl are not displaying any data. I have tried setting the DataContext and ItemsSource(for the TabControl) , without success. The data to be displayed is from the SelectedSession class.
xaml
<!--session data grid-->
<Grid x:Name="SessionDataGrid"
Grid.Column="2"
Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl
Grid.Row="0"
Margin="0 0 0 0"
prism:RegionManager.RegionName="DataRegion"/>
</Grid>
View
<!--row 0-->
<Label x:Name="labelSessionData"
Content="Session Data"
Style="{DynamicResource LabelGeneric}"
Grid.Column="0"
Grid.Row="0"
HorizontalContentAlignment="Center"
Margin="1,2,0,0"/>
<!--row 1-->
<Label x:Name="labelSessionDataIdentifier"
Content="Identifier: "
Grid.Column="0"
Grid.Row="1"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Right"
Style="{DynamicResource LabelGeneric}"/>
<TextBox x:Name="textBoxSessionDataIdentifier"
Grid.Column="1"
Grid.Row="1"
HorizontalAlignment="Left"
Style="{DynamicResource textBoxDataN}"
Text="{Binding SelectedSession.Identifier, Mode=OneWay}"
Width="230"
Margin="0 4 0 3"/>
<Label x:Name="labelSessionDataCamera"
Content="Camera: "
Grid.Column="2"
Grid.Row="1"
HorizontalAlignment="Right"
HorizontalContentAlignment="Right"
Style="{DynamicResource LabelGeneric}"/>
<ComboBox x:Name="comboboxSessionDataCamera"
Grid.Column="3"
Grid.Row="1"
FlowDirection="LeftToRight"
HorizontalAlignment="Left"
HorizontalContentAlignment="Left"
IsEditable="True"
ItemsSource="{Binding Cameras}"
DisplayMemberPath="CameraName"
SelectedValue="{Binding SelectedSession.CameraId, Mode=TwoWay}"
SelectedValuePath="CameraId"
Style="{DynamicResource ComboboxData}"
Width="230"
Margin="0 0 0 0"/>
<!--row 3-->
<TabControl x:Name="tabControlSessionData"
Grid.Column="0"
Grid.ColumnSpan="4"
Grid.Row="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,10,0"
Visibility="Hidden">
<TabItem Header="Analog">
<Grid Background="{StaticResource MainBackgroundColor}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="83"/>
<ColumnDefinition Width="8"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<!--row 0-->
<Label x:Name="labelSessionAnalogFilm"
Content="Film: "
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0"
Style="{DynamicResource LabelGeneric}"
Margin="1,1,0,0"/>
<ComboBox x:Name="comboboxSessionAnalogFilm"
Grid.Column="2"
Grid.ColumnSpan="2"
Grid.Row="0"
ItemsSource="{Binding Films}"
DisplayMemberPath="FilmName"
SelectedValue="{Binding SelectedSession.FilmId, Mode=TwoWay}"
SelectedValuePath="FilmID"
Style="{DynamicResource ComboboxData}"
Margin="0 0 0 0"/>
<Label x:Name="labelSessionAnalogISO"
Content="ISO: "
Grid.Column="4"
Grid.Row="0"
HorizontalAlignment="Right"
HorizontalContentAlignment="Right"
Style="{DynamicResource LabelGeneric}"
Margin="2,1,0,0"/>
<TextBox x:Name="textBoxSessionAnalogFilmISO"
Grid.Column="5"
Grid.Row="0"
HorizontalAlignment="Left"
Style="{DynamicResource textBoxDataN}"
Text="{Binding FilmISO, Mode=TwoWay}"
Width="50"
Margin="0,4"/>
Any help would be appreciated.
I was getting the data from a DataGrid. Once I defined the columns for the data it started working.

Why is my DataGrid showing up in the wrong Grid column?

My DataGrid should be showing up in the middle of three Grid columns, Column 1, but instead it appears to be showing up in Column 0, as seen here:
You can see there that my Cancel button (Column 0) and my OK button (column 2) are right next to each other because the DataGrid appears to be occupying Column 0, instead of Column 1. However, when I break my code during execution and do Grid.GetColumn(DataGridFilteredFixesReportsTable), it properly returns 1.
I've also tried moving the DataGrid to Column 2 to see what happens, but the visual result was exactly the same.
What am I doing wrong or misunderstanding about how this works?
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid Margin="20,20,20,20" Name="SettingsGrid" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="600"/>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<DataGrid Grid.Row="0" Grid.Column="1"
Name="DataGridFilteredFixesReportsTable"
ItemsSource="{Binding Path=FilteredFixesReportsTable.DefaultView}"
DataContext="{Binding ElementName=SeeAllFixesReportsWindow}"
AutoGenerateColumns="True"
FontSize="28" FontFamily="Times New Roman"
IsReadOnly="True">
</DataGrid>
</ScrollViewer>
<Button Grid.Row="2" Grid.Column="0"
Name="ButtonCancel"
Click="OkCancel_Click"
Content="Cancel"
FontSize="32" FontFamily="Times New Roman" FontWeight="Bold" Background="Pink"/>
<Button Grid.Row="2" Grid.Column="2"
Name="ButtonOk"
IsDefault="True"
Click="OkCancel_Click"
Content="OK"
FontSize="32" FontFamily="Times New Roman" FontWeight="Bold" Background="PaleGreen"/>
</Grid>
</ScrollViewer>
Direct children of the Grid should have the column and row specifications. Your DataGrid is a child of ScrollViewer, not Grid so it is ignoring those properties.
Try:
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid Margin="20,20,20,20" Name="SettingsGrid" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="600"/>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Should be set here -->
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Auto">
<DataGrid
Name="DataGridFilteredFixesReportsTable"
ItemsSource="{Binding Path=FilteredFixesReportsTable.DefaultView}"
DataContext="{Binding ElementName=SeeAllFixesReportsWindow}"
AutoGenerateColumns="True"
FontSize="28" FontFamily="Times New Roman"
IsReadOnly="True">
</DataGrid>
</ScrollViewer>
<Button Grid.Row="2" Grid.Column="0"
Name="ButtonCancel"
Click="OkCancel_Click"
Content="Cancel"
FontSize="32" FontFamily="Times New Roman" FontWeight="Bold" Background="Pink"/>
<Button Grid.Row="2" Grid.Column="2"
Name="ButtonOk"
IsDefault="True"
Click="OkCancel_Click"
Content="OK"
FontSize="32" FontFamily="Times New Roman" FontWeight="Bold" Background="PaleGreen"/>
</Grid>
</ScrollViewer>
Since it isn't set on the ScrollViewer it is defaulting to 0 and 0 for row and column.

MahApps.Metro Flyout not overlaying a column

I have a simple layout and am trying to put in a flyout to use as a user input screen. Here's the xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
<Button Content="Add New Task" Command="{Binding NewTaskCommand}" Margin="{StaticResource CenteredToolMargin}"/>
<Button Content="Archive Tasks" Command="{Binding ArchiveTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
<Button Content="Complete Tasks" Command="{Binding CompleteTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
</StackPanel>
<Controls:Flyout Header="Flyout" Position="Right" Width="200" IsOpen="True">
<Controls:FlyoutsControl>
<TextBlock FontSize="24">Hello World</TextBlock>
</Controls:FlyoutsControl>
</Controls:Flyout>
</Grid>
The problem is, the flyout appears to the left of column 1 instead of on top of it. When I close the flyout, it animates over column 1, though. I tried swapping the "Controls:Flyout" and "Controls:FlyoutsControl" tags as I can't find consistent guidance on which way they should go, but it acts the same, either way. Am I missing something?
I set the Column 1 Width to Auto if you want your fixed width than in Flyout add this line Grid.Column="0" Grid.ColumnSpan="2" and remove Grid.Column="1"
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
<Button Content="Add New Task" />
<Button Content="Archive Tasks" />
<Button Content="Complete Tasks" />
</StackPanel>
<Controls:Flyout Grid.Column="1" Header="Flyout" Position="Right" Width="200" IsOpen="True">
<Controls:FlyoutsControl>
<TextBlock FontSize="24">Hello World</TextBlock>
</Controls:FlyoutsControl>
</Controls:Flyout>
</Grid>

Categories

Resources