my data grid is showing extra blank column in right how to avoid that.
below is my xaml code.
<DataGrid.Columns>
<DataGridTemplateColumn Header="Spool name" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox Content="{Binding SpoolName}" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Sheet num." Width="*" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="dgtxtBox" Text="{Binding SpoolName}" Margin="0,0,5,0"></TextBlock>
<Image x:Name="dgimgBox" Source="{Binding Converter={StaticResource ImagePathConverter}}" Height="12" Width="12"></Image>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--<DataGridTextColumn Header="IsSeleted" Binding="{Binding IsSelected, Mode=TwoWay}" Width="0" Visibility="Hidden" IsReadOnly="True"/>-->
</DataGrid.Columns>
</DataGrid>
</Border>
where you define your data grid specify AutoGenerateColumns to false so only the bindings are the columns shown so;
Datagrid AutoGenerateColumns="False
that should do the trick. same with rows if you ever encounter the problem (CanUserAddRows=false)
I think what you are trying to say is the extra blank that appears after all columns are shown. By default all columns have a witdh depending on the content within it.
So if your datagrid is wither than that, you get an extra blank space.
One common way of get rid of that is to make the columns as wide as they can get.
<Datagrid ColumnWidth="*">
You have to be aware that the Datagrid Width is not the sum of all columns widths.
I hope is what you are looking for. Cheers
Related
I have a small problem with my datagrid. I don't want the users to be able to add rows to the datagrid. But when I set CanUsersAddRows=True my three Buttons in the datagrid shrink for some reason and are not really visible. Is that a bug or am I making a mistake ?
Here is my datagrid code:
<DataGrid
x:Name="taskGrid"
AutoGenerateColumns="False"
Background="{DynamicResource MaterialDesignBackground}"
Foreground="#FF000000"
IsReadOnly="False"
ItemsSource="{Binding Times}"
CanUserAddRows="True"
SelectedItem="{Binding SelectedTime}"
VerticalScrollBarVisibility="Auto">
<DataGrid.Columns>
<DataGridTextColumn
Width="0.25*"
Binding="{Binding Mitarbeiter}"
Header="Mitarbeiter" />
<!--StringFormat='HH:mm:ss',-->
<DataGridTextColumn
Width="0.25*"
Binding="{Binding startTime, ConverterCulture={x:Static gl:CultureInfo.CurrentCulture}}"
Header="Startzeit" />
<DataGridTextColumn
Width="0.25*"
Binding="{Binding endTime, ConverterCulture={x:Static gl:CultureInfo.CurrentCulture}}"
Header="Endzeit" />
<DataGridCheckBoxColumn
Width="0.25*"
Binding="{Binding Nachgetragen}"
Header="Nachgetragen" />
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button
x:Name="btnOpenDetails"
Background="{DynamicResource MaterialDesignBackground}"
BorderThickness="0"
Click="btnOpenDetails_Click"
Foreground="#FF000000"
Tag="{Binding AuftragID}">
Details
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button
x:Name="btnChangeTaskNumber"
Background="{DynamicResource MaterialDesignBackground}"
BorderThickness="0"
Click="btnChangeTaskNumber_Click"
Foreground="#FF000000"
IsEnabled="True"
Tag="{Binding ID}">
Auftragsnummer ändern
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button
x:Name="btnDeleteEntry"
Background="{DynamicResource MaterialDesignBackground}"
BorderThickness="0"
Click="btnDeleteEntry_Click"
Foreground="#FF000000"
Tag="{Binding AuftragID}">
Löschen
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
The following image shows an example when I set the property CanUsersAddRows=True in the datagrid control (Note the three buttons on the right hand):
The next image shows the same stuff, but this time with CanUsersAddRows=False:
As you can see, the buttons kinda disappear. What is going on. What do I need to change?
Thanks!
I managed to kinda fix it. I gave the <DataGridTemplateColumn> column a width. That fixed the problem. But I still don't understand why it works when CanUsersAddRows=False. A better answer would be appreciated!
Why datepicker is not appearing in my datagrid.
I have textblock, one datepicker and then again textblock in total three columns, Those two textblocks appears properly but the datepicker do not appear. whereas there is no problem in binding because if a have applied same in the listview and there they are appearing, it's something wrong i have done in xaml in datagrid which i am not able to figure it out. I want user to select dates from this datepicker.
Below is my code, what i am missing any idea ?
<DataGrid AutoGenerateColumns="False"
ColumnWidth="*"
AutoGenerateColumns="False"
CanUserSortColumns="False"
ItemsSource="{Binding EquipMaintCollection}"
SelectedIndex="{Binding SelectedIndexOfItem}"
SelectedItem="{Binding SelectedMaintElement}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="{x:Static res:LocalizedString.Name}" />
<DataGridTemplateColumn Header="MainteDue">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<DatePicker x:Name="MainteDue" SelectedDate="{Binding MainteDue, Mode=TwoWay}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=MainteDue,Mode=TwoWay,StringFormat={}{0:dd/MM/yyyy}}" VerticalAlignment="Center" HorizontalAlignment="Left">
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Until Due" Width="*" MinWidth="100" Foreground="{Binding UntilDue, Converter={StaticResource BoolToRedBrushConverter}}" Binding="{Binding Path=UntilDue}" />
</DataGrid.Columns>
</DataGrid>
I have a datagrid like in the following.
.............
<DataGridTemplateColumn >
<DataGridTemplateColumn.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="SomeTopic"/>
<ComboBox/>
</StackPanel>
</DataGridTemplateColumn.Header>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
I want that column to have a combobox in its header. At the same time, I want all the rows in the datagrid to have comboboxes under the same column.
That's what I've written to achieve this. Everything is fine. But in the header what it shows is "System.Windows.Controls.Stackpanel".....It does not show the combobox in the header....not even the topic "sometopic".
where have I gone wrong ?
Can someone answer pls ?
You need to use the DataGridColumn.HeaderTemplate Property instead.
<DataGridTemplateColumn>
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="SomeTopic"/>
<ComboBox/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
In WPF when using a DataGrid, I have an Image and various text fields. When I select a row, the selection looks ugly because the text cell heights are the same size as each other but are different to the image which is dynamic depending on the width of the image's grid column width.
In otherwords, the blue background colour that you get upon selection is quite large on the image cell as it is for the others as I show in the image below:
The DataGrid is just being constructed right now so it is very simple. I am just not sure of the easiest, cleanest, minimal code approach (if there is such a thing with WPF!). Here is the xaml for it so far:
<DataGrid Margin="10,52,10,10" IsReadOnly="True" AutoGenerateColumns="False" Name="MainGrid" ItemsSource="{Binding CurrentData}" GridLinesVisibility="Horizontal" HorizontalGridLinesBrush="#FFBFBFBF" VerticalGridLinesBrush="White" >
<DataGrid.Columns>
<DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Picture}" RenderOptions.BitmapScalingMode="HighQuality" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="SKU" Binding="{Binding SKU}" />
...
...
<DataGridTextColumn Header="Product Name" Binding="{Binding Label}" />
</DataGrid.Columns>
</DataGrid>
So, over to the WPF gurus. I have hunted high and low and haven't found something that seems to do it.
It would appear I found the solution. It was quite simple really, as I simply used DataGridTemplateColumn for each text field and put a TextBlock inside. This resolved the selection and the selection effect filled the whole cell due to the way the TextBlock filled the available space. I used VerticalAlignment to center the text and then it looked much much better as shown below:
For completion, here is the xaml:
<DataGrid Margin="10,52,10,10" IsReadOnly="True" AutoGenerateColumns="False" Name="MainGrid" ItemsSource="{Binding CurrentData}" GridLinesVisibility="Horizontal" HorizontalGridLinesBrush="#FFBFBFBF" VerticalGridLinesBrush="White">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Picture}" RenderOptions.BitmapScalingMode="HighQuality" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="SKU" Width="SizeToCells" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding SKU}" VerticalAlignment="Center"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
...
...
<DataGridTemplateColumn Header="Label" Width="SizeToCells" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Label}" VerticalAlignment="Center"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
There is probably a much better way using styling and what not but this worked quite nicely without any code behind. Simples!?
I have a requirement to keep all the column widths matching accross several datagrids. As I have things defined the column can grow as required as the user enters larger numbers. As this happens the sibling table columns get out of alighment and their width needs to keep pace with the column where the data is being entered. Because of the number of columns I can't really use fixed width, although that may be the only way.
Here is a stripped down defination of the datagrid for example. All table are defined in the same fashion and of course have many more columns. Any ideas would be appriciated.
<DataGrid Grid.Row="0" Style="{StaticResource BaseAFGrid}" HorizontalAlignment="Stretch" x:Name="gridBilanActif"
VerticalAlignment="Top" Margin="5,5,0,0">
<DataGrid.Columns>
<DataGridTemplateColumn IsReadOnly="False" Header="Nom" Width="260" CanUserSort="False" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate >
<TextBox Margin="{Binding Level, Converter={StaticResource LevelConverter}}"
x:Name="txtTitreA" Style="{StaticResource AFTextbox}"
IsReadOnly="{Binding TitreEstNonmodifiable}"
Text="{Binding Nom, Mode=TwoWay, UpdateSourceTrigger=LostFocus}"
Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn IsReadOnly="False" Header="1" Width="Auto" MinWidth="55" CanUserSort="False" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate >
<TextBox x:Name=" colPeriode1A" Style="{StaticResource MilierDoubleTextBoxAF}"
CValidation:TextboxValidator.IsFloating="True" CValidation:TextboxValidator.MaxDecimal="2"
IsReadOnly="{Binding HasChildren}" TextChanged="colPeriode1A_TextChanged"
Text="{Binding P1_Bilan, Mode=TwoWay, UpdateSourceTrigger=LostFocus,
Converter={StaticResource CurrencyConverter}}" HorizontalAlignment="Right"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn IsReadOnly="False" Header="2" Width="Auto" MinWidth="55" CanUserSort="False" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate >
<TextBox x:Name=" colPeriode2A" Style="{StaticResource MilierDoubleTextBoxAF}"
CValidation:TextboxValidator.IsFloating="True" CValidation:TextboxValidator.MaxDecimal="2"
IsReadOnly="{Binding HasChildren}"
Text="{Binding P2_Bilan, Mode=TwoWay, UpdateSourceTrigger=LostFocus,
Converter={StaticResource CurrencyConverter}}" HorizontalAlignment="Right"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>