question

JeffinAtl-3170 avatar image
0 Votes"
JeffinAtl-3170 asked JeffinAtl-3170 edited

How to split Grid 2x5 and display same pattern in XAML

I have a grid and want to display 2x5 child grid in XAML.
I made main grid and defined 2 raws and 5 columns.
I'd like to display information(Chart#, Patient Name, Phone# and Type) in each cell.
Can I make a Style and use it from each cells?

windows-wpf
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

easiest way is having a ListBox. In your ListBox.ItemTemplate, make a 2x5 grid DataTemplate

0 Votes 0 ·

1 Answer

DaisyTian-1203 avatar image
0 Votes"
DaisyTian-1203 answered JeffinAtl-3170 edited

You could use ListBox/DataGrid and create its ItemTemplate like EmonHaque-1485 said. If you must use Grid to implement, you can use below code:

     <Window.Resources>
         <ControlTemplate x:Key="MyTemplate">
             <Grid>
                 <Border BorderThickness="7" CornerRadius="4">
                     <Border.BorderBrush>
                         <SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
                     </Border.BorderBrush>
                     <Grid>
                         <Grid.Background>
                             <SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
                         </Grid.Background>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="40"></ColumnDefinition>
                             <ColumnDefinition Width="40"></ColumnDefinition>
                             <ColumnDefinition Width="40"></ColumnDefinition>
                             <ColumnDefinition Width="40"></ColumnDefinition>
                             <ColumnDefinition Width="40"></ColumnDefinition>
                         </Grid.ColumnDefinitions>
                         <Grid.RowDefinitions>
                             <RowDefinition Height="30"></RowDefinition>
                             <RowDefinition Height="30"></RowDefinition>
                         </Grid.RowDefinitions>
                         <TextBlock Grid.Row="0"  Grid.Column="0" Text="Chart" ></TextBlock>
                         <TextBlock Grid.Row="0"  Grid.Column="1" Text="Name" ></TextBlock>
                         <TextBlock Grid.Row="0"  Grid.Column="2" Text="Phone" ></TextBlock>
                         <TextBlock Grid.Row="0"  Grid.Column="3" Text="Type" ></TextBlock>
                         <TextBlock Grid.Row="0"  Grid.Column="4" Text="col5" ></TextBlock>
                         <TextBlock Grid.Row="1"  Grid.Column="0"  Background="LightBlue"></TextBlock>
                         <TextBlock Grid.Row="1"  Grid.Column="1"  Background="LightBlue"></TextBlock>
                         <TextBlock Grid.Row="1"  Grid.Column="2"  Background="LightBlue"></TextBlock>
                         <TextBlock Grid.Row="1"  Grid.Column="3"  Background="LightBlue"></TextBlock>
                         <TextBlock Grid.Row="1"  Grid.Column="4"  Background="LightBlue"></TextBlock>
                     </Grid>
                 </Border>
             </Grid>
         </ControlTemplate>
         <Style TargetType="ContentControl">
             <Setter Property="Template" Value="{StaticResource MyTemplate}"></Setter>
         </Style>
     </Window.Resources>
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="200"></ColumnDefinition>
             <ColumnDefinition Width="200"></ColumnDefinition>
             <ColumnDefinition Width="200"></ColumnDefinition>
             <ColumnDefinition Width="200"></ColumnDefinition>
             <ColumnDefinition Width="200"></ColumnDefinition>
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="70"></RowDefinition>
             <RowDefinition Height="70"></RowDefinition>
         </Grid.RowDefinitions>
         <ContentControl Grid.Row="0"  Grid.Column="0" ></ContentControl>
         <ContentControl Grid.Row="0"  Grid.Column="1" ></ContentControl>
         <ContentControl Grid.Row="0"  Grid.Column="2" ></ContentControl>
         <ContentControl Grid.Row="0"  Grid.Column="3" ></ContentControl>
         <ContentControl Grid.Row="0"  Grid.Column="4" ></ContentControl>
    
         <ContentControl Grid.Row="1"  Grid.Column="0" ></ContentControl>
         <ContentControl Grid.Row="1"  Grid.Column="1" ></ContentControl>
         <ContentControl Grid.Row="1"  Grid.Column="2" ></ContentControl>
         <ContentControl Grid.Row="1"  Grid.Column="3" ></ContentControl>
         <ContentControl Grid.Row="1"  Grid.Column="4" ></ContentControl>
     </Grid>

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks for detailed information.

0 Votes 0 ·

This way is to create controls at design time.
However I want to create control dynamically at run-time?
I have data of List<Patient> and want to display each item of List<Patient> to each Control in the grid(2rows x 5columns).
The reason why I want to create each control at run-time is because there's no way to match each item of List<Patient> and each control if fix the name of control at design time.
If any, please let me know.

0 Votes 0 ·