WPF: Data Grid not horizontally scrollable - c#

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.

Related

WPF - stretch listview over multiple grid columns

I have UserControl with a Grid that is divided into rows and columns. Something like this:
how can I add ListView on multiple rows and columns? For example:
Part of my xaml:
<Grid Margin="30,0,30,0" Background="#00000000">
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="60" />
<RowDefinition Height="160"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.4*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="0.5*"></ColumnDefinition>
<ColumnDefinition Width="0.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="1"
FontSize="28"
FontFamily="../Fonts/#GeForce-Bold"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="White">
<TextBlock Text="Deploy" TextDecorations="Underline"/>
</Label>
...
...
</Grid>
<Grid Grid.Row="2" Grid.Column="0">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="0.5*"></ColumnDefinition>
<ColumnDefinition Width="0.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="2" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="0.3*"></RowDefinition>
<RowDefinition Height="0.7*"></RowDefinition>
</Grid.RowDefinitions>
...
...
My goal is to display ListView at rows 0-3 and columns 0-2.
Mark already gave the hint in the comments, but for the sake of having an answer including an example, here it is:
You are locking for the Grid.ColumnSpan (or Grid.RowSpan) property.
The following code will place the list view starting in column 1 and extending over a total of 2 columns:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="1" Grid.ColumnSpan="2">
<ListViewItem>item 1</ListViewItem>
<ListViewItem>item 2</ListViewItem>
</ListView>
</Grid>

WPF How to put button into row which is inside column

How can I put button into row which is inside column?
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition MinWidth="300" Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="50" MinHeight="50"/>
</Grid.RowDefinitions>
</Grid>
Grid.Row="2" is out of index. Grid.Colum="1" puts the button into correct column. What might be the correct way to use those rows?
Your initial row index guess was correct. You just need to put your button in the proper place in your XAML.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition MinWidth="300" Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="50" MinHeight="50"/>
</Grid.RowDefinitions>
<Button Grid.Row="2"/>
</Grid>
</Grid>

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>

Independent width in a WPF Grid

I have a grid with 2 rows and 2 columns in WPF. I would like that the column widths are independent for each row. I tried "auto", but no success. Here is a picture in order to explain:
How can I accomplish this using grid?
If you must use a grid layout, then you have a couple of options:
Option 1: Make each row a single column and then nest a grid in each row you would like independent columns:
XAML
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="AAAAAAAAAAAAAAAAAAAA" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="BBBBBBB"">
<TextBlock Grid.Column="1" Text="CCCCCCC" />
</Grid>
</Grid>
Option 2: Make use of ColumnSpan in the rows:
XAML
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.ColumnSpan="2" Text="AAAAAAAAAAAAAAAAAAAA" />
<TextBlock Grid.Row="1" Text="BBBBBBB"">
<TextBlock Grid.Row="1" Grid.Column="1" Text="CCCCCCC" />
</Grid>
</Grid>
*These were typed without an editor and may need a bit of tweaking.
Two grids?
<StackPanel Width="277">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="AAAAAAAAAAAAAAAAAAAA" Grid.Row="0" Grid.Column="0"/>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="BBBBBBB" Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="CCCCCCC" Grid.Row="0" Grid.Column="1"/>
</Grid>
</StackPanel>

How to add a control button for displaying data prev entered

I have a small screen program which displays patients at the top there is a search button where u can enter by name. I need this search display to be controlled by a button that is, it should not display any records (prev entered) unless click on this button, how would i set this up?
<Grid x:Name="LayoutRoot" Background="LightGray" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name:" Margin="3"></TextBlock>
<TextBox Grid.Column="1" x:Name="sTxtFirstName" Margin="3"></TextBox>
<TextBlock Grid.Column="2" Text="Last Name:" Margin="3"></TextBlock>
<TextBox Grid.Column="3" x:Name="sTxtLastName" Margin="3"></TextBox>
<TextBlock Grid.Column="4" Text="Gender:" Margin="3"></TextBlock>
<ComboBox Grid.Column="5" x:Name="sCombGender" Margin="3">
<ComboBoxItem Content=""></ComboBoxItem>
<ComboBoxItem Content="Male"></ComboBoxItem>
<ComboBoxItem Content="Female"></ComboBoxItem>
</ComboBox>
<Button x:Name="btnSearch" Grid.Column="6" Margin="3" Height="30" Command="{Binding CMDSearch}" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="/PBM;component/Resources/Images/search.png" VerticalAlignment="Center" Margin="0,0,2,0" ></Image>
<TextBlock Text="Search" Width="50" VerticalAlignment="Center" Margin="1,0,0,0"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
You're going about it all wrong. Only use grid for laying out controls on the screen.
Use a ListBox to show a list of items.
Declare your items in an ObservableCollection.
Use data binding to bind the listbox to the observable collection.
Use C# to manipulate the contents of the list in response to your button click, then the list data appears automatically.

Categories