I am trying to do some simple thing in WPF but can't find the way to do it.
I have a ComboBox in a DataGrid header to filter data. The data is binded to a GrouBy statement of all my data.
These show some CheckBox The XAML code is:
<DataGridTextColumn x:Name="Type"
Binding="{Binding TypeOfData, Mode=OneTime}"
SortMemberPath="TypeOfData"
IsReadOnly="true"
CanUserSort="true">
<DataGridTextColumn.Header>
<DockPanel>
<Label Content="Type Of Data"
DockPanel.Dock="Left"/>
<ComboBox x:Name="comboBoxType"
DockPanel.Dock="Right"
SelectionChanged="comboBoxType_SelectionChanged">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="itemsComboBox">
<CheckBox Name="checkBoxType"
IsChecked="False"
Content="{Binding Key}"
Unchecked="FilterChange"
Checked="FilterChange"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DockPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
The code behind fore binding is:
comboBoxType.ItemsSource = allData.GroupBy(data=> data.TypeOfData).OrderBy(grp=> grp.Key);
And this work.
But now I want to add 2 button to check and uncheck all at the end or at the start of the ComboBox but I can't seem to find how to add those static button in a dynamic data template.
Edit Answer to grek40:
I want the buttons in the combobox Items before or after the checkboxes.
CompositeCollection could help but I can't seem to make it work.
Thank You
Replace the DockPanel with a Grid that has several ColumnDefinitions:
<DataGridTextColumn x:Name="Type" Binding="{Binding TypeOfData, Mode=OneTime}" SortMemberPath="TypeOfData" IsReadOnly="true" CanUserSort="true">
<DataGridTextColumn.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="Type Of Data" />
<ComboBox x:Name="comboBoxType"
Grid.Column="1"
SelectionChanged="comboBoxType_SelectionChanged">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="itemsComboBox">
<CheckBox Name="checkBoxType"
IsChecked="False"
Content="{Binding Key}"
Unchecked="FilterChange"
Checked="FilterChange"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Button Content="Check"
Grid.Column="2" />
</Grid>
</DataGridTextColumn.Header>
</DataGridTextColumn>
Related
I have created the custom usercontrol for datagrid as CustomDatagrid. And i am using that custom datagrid in another usercontrol as DatagridUserControl. I added Textblock inside the CustomDatagrid in DatagridUserControl. I gave x:Name for Textblock in DatagridUserControl.
<GridControl:CustomDatagrid Grid.Row="2" Height="260" Width="640" x:Name="GridTask" BorderThickness="0" FontSize="24" Foreground="White" SelectionChanged="slmGridTask_SelectionChanged"
ColumnWidth="*" CanUserResizeColumns="False" Background="Transparent">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Margin="-50,0,0,0" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="-50,0,0,0">
<TextBlock Text="{Binding Name}" TextWrapping="WrapWithOverflow"
TextAlignment="Justify" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="-20,0,0,0" />
</WrapPanel>
<Grid Margin="-60,0,0,0" Grid.Row="1" >
<TextBlock x:Name="TxtBlkDescription" Margin="0,0,0,0" TextWrapping="Wrap" Text="{Binding Description}" Visibility="Collapsed" FontWeight="Regular" Foreground="White" FontSize="18" FontFamily="Open Sans" HorizontalAlignment="Left" />
</Grid>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</GridControl:CustomDatagrid>
That textblock should display only if datagridrow is selected. So I added DataTrigger property for Textblock.
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="True">
<Setter TargetName="TxtBlkDescription" Property="Visibility" Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
But I received the following error
Cannot set Name attribute value 'TxtBlkDescription' on element 'TextBlock'. 'TextBlock' is under the scope of element 'SLMDatagrid', which already had a name registered when it was defined in another scope.
How to overcome this error?
Or is there is any other way to display the Textblock only if Datagridrow is selected?
I am trying to apply overall formatting on my application. The application is already build. When showing data in a datagrid, I want to format and right align all the textblocks having amount in them. Is this possible to do it using some trigger or any other way? Is it possible to know if a binding path contains word "amount" and if it does apply the required formatting.
Basically I want to control formatting and alignment based on values in whole app from one location. So that it is easy to change in longer run.
Here is my XAML for view:
<UserControl x:Class="CPOSApplication.UserControls.Sales.SalesFilterResult"
xmlns:PaginationControl="clr-namespace:CPOSApplication.GeneralControl.PaginationControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:localConvertor="clr-namespace:CPOSApplication.Convertors"
xmlns:com="pagina"
xmlns:local="clr-namespace:CPOSApplication.Convertors"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="1000">
<UserControl.Resources>
<local:DataGridRowToIndexConvertor x:Key="RowToIndexConvertor">
</local:DataGridRowToIndexConvertor>
<localConvertor:PermissionToEnableConvertor x:Key="PermissionToBoolConvertor"/>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="GridLabel" Grid.Row="0" Style="{DynamicResource HeadingLabelsCustomStyle}" Content="Sales"/>
<DataGrid Grid.Row="1" Style="{DynamicResource DataGridStyle}" ColumnHeaderStyle="{DynamicResource DataGridColumnHeaderStyle}" RowStyle="{DynamicResource DataGridRowStyle}" CellStyle="{DynamicResource DataGridCellStyle}" x:Name="SalesGrid">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Id" Visibility="Collapsed" Width="Auto" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Id}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Index" Width="*" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock x:Name="IndexCell" Style="{DynamicResource GridTextBlock}" Text="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow}, Converter={StaticResource RowToIndexConvertor}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Serial Number" Width="*" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=SerialNumber}" Style="{DynamicResource GridTextBlock}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Customer" Width="*" IsReadOnly="True" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=CustomerName}" Style="{DynamicResource GridTextBlock}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Payment Method" Width="*" IsReadOnly="True" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=FormattedPaymentType}" Style="{DynamicResource GridTextBlock}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Sale Date" Width="*" IsReadOnly="True" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=CreatedDate}" Style="{DynamicResource GridTextBlock}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Sale Amount" Width="*" IsReadOnly="True" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=TotalAmount}" Style="{DynamicResource GridTextBlock}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="*" Header="Actions" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Style="{DynamicResource ActionPanel}">
<Image x:Name="EditImg" IsEnabled="{Binding Converter={StaticResource PermissionToBoolConvertor}, ConverterParameter='Edit Sale|Sale'}" Visibility="{Binding Converter={StaticResource LiveConnectionToVis}}" Style="{DynamicResource EditImg}" Source="/CPOSApplication;component/Resources/Images/Icons/edit.png" Tag="{Binding}" MouseDown="Edit_Click"></Image>
<Image x:Name="DeleteImg" IsEnabled="{Binding Converter={StaticResource PermissionToBoolConvertor}, ConverterParameter='Delete Sale|Sale'}" Visibility="{Binding Converter={StaticResource LiveConnectionToVis}}" Style="{DynamicResource DeleteImg}" Source="/CPOSApplication;component/Resources/Images/Icons/delete.png" Tag="{Binding}" MouseDown="Delete_Click"></Image>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<PaginationControl:Paginator Background="#e4e4e4" x:Name="pager" Grid.Row="2" VerticalAlignment="Bottom" Margin="0,10,0,0" Height="30" />
</Grid>
</UserControl>
You can try binding TextBlocks like this:
<TextBlock Text="{Binding Path=TotalAmount}" TextAlignment="{Binding Path=TotalAmount, Converter="{StaticResource ContentToAlignmentConverter}" />
You will have to implement ContentToAlignmentConverter yourself. I won't put a code of it here, because it depends what you exactly want to check in it, but it's pretty easy to do it yourself. Here is a sample of a value converter in WPF
EDIT:
If you want to apply this changes to all your TextBlocks in your DataGrid, you should try something like this (not sure if it will work, but it should):
<DataGrid.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{DynamicResource GridTextBlock}">
<Setter Property="TextAlignment" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Text, Converter="{StaticResource ContentToAlignmentConverter}}" />
</Style>
</DataGrid.Resources>
Can i make UpDown Column at DataGrid?
I have simple DataGrid:
<DataGrid Grid.Row="0" Grid.Column="0">
<DataGrid.Columns>
<DataGridTextColumn Header="Name"> </DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
And i want to make UpDown column. Can i do that?
Thank you!
P.S. i mean something like numericUpDown counter. :up: [1], down: [0].
I think you can do something like
<DataGrid>
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=AttrName}" Height="25" Width="150" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Text="{Binding Path=AttrDisplayLabel}" Height="25" Width="Auto" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10,0,0,0" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox Height="25"
ItemsSource="{Binding Source={StaticResource cvsAttributes}}"
SelectedValuePath="AttributeID"
IsSynchronizedWithCurrentItem="False"
SelectionChanged="Selector_OnSelectionChanged"
SelectedValue="{Binding Path=AttributeId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
....
Just replace combo with your updown/spinner control. The celltemplate is your display... the celledittemplate is your edit control...(updown...etc...)
If you mean NumericUpDown column
you can have a template column and add NumericUpDown Control to the template
Look Here for creating custom numeric updown control or simply use one provided with WPFToolkit !!
Find Codeples for Toolkit Here
I have a DataGridTextColumn whose header consists of a TextBlock and a ComboBox. I would like the TextBlock to be left aligned and the ComboBox to be right-aligned. When I try setting that on ComboBox using HorizontalAlignment = "Right", it does not work! For the header I tried with StackPanel as well as a Grid for containing the TextBlock and ComboBox. What I am doing wrong?
<DataGrid
CanUserSortColumns="True"
IsReadOnly="True">
<DataGrid.Columns>
<DataGridTextColumn Header="Time"/>
<DataGridTextColumn>
<DataGridTextColumn.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Money" VerticalAlignment="Center"/>
<ComboBox HorizontalAlignment="Right" VerticalAlignment="Center"
Width="100" ItemsSource="{Binding comboBoxItems}" SelectedIndex="0">
</ComboBox>
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
Attempt with Grid:
<DataGridTextColumn.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Money" VerticalAlignment="Center"/>
<ComboBox Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center"
ItemsSource="{Binding comboBoxItems}" SelectedIndex="0">
</ComboBox>
</Grid>
</DataGridTextColumn.Header>
EDIT 1: I would like the ComboBox to be stretched if the column is dragged to increase the column width. Otherwise atleast the ComboBox should align to the right if the column is dragged on the right side.
EDIT 2: The important thing here is that when I drag the column to increase its width, the ComboBox should fall on the right side.
use this
<DataGridTextColumn Width="120">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<Grid Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type DataGridColumnHeader}}}">
<TextBlock Text="LLLLL" HorizontalAlignment="Left" Margin="5"/>
<TextBlock Text="RRRRR" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
Try DockPanel instead of StackPanel.
<DockPanel LastChildFill="True">
<TextBlock Text="Money" VerticalAlignment="Center" DockPanel.Dock="Left"/>
<ComboBox VerticalAlignment="Center" SelectedIndex="0"/>
</DockPanel>
i've got a DataGrid w/ 3 columns. the first column cell is a Combo from which the user can select values of varying length. i would like the first column to display the entire value of the selected item (i.e. it should size to fit its content). this works when i set the column's Width="Auto". the problem is at some point, when the entire width of the grid is taken up, and the scroll bar appears. instead i would rather the datagrid itself always expand, and consequently its containers. how can i do this..
the structure of my xaml is as follows
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<local:MyUserControl... Grid.Col="1">
<Expander Grid.Column="2">
<GroupBox Template="{Binding OptionsSelectorTemplate}" Grid.Row="1" />
</Expander
</Grid>
<ControlTemplate x:Key="OptionsSelectorTemplate">
<StackPanel Orientation="Vertical">
<dxl:NavBarControl...>
<dxn:NavBarControl.Groups>
<dxn:NavBarGroup Header="Options Set 1">
<DataGrid Style="{StaticResource DataGridTemplateStyle}" ItemSource="{Binding ViewModel.Options}" DataContext="{Binding .}"/>
</dxn:NavBarGroup>
<dxn:NavBarGroup Header="Options Set 2">
<DataGrid Style="{StaticResource DataGridTemplateStyle}" ItemSource="{Binding ViewModel.Options}" DataContext="{Binding .}"/>
</dxn:NavBarGroup>
</dxl:NavBarControl...>
<Button ... />
</StackPanel>
</ControlTemplate>
<Style x:Key="DataGridTemplateStyle" TargetType="DataGrid">
<Setter Property="Template" Value="{StaticResource DataGridTemplate}" />
</Style>
<ControlTemplate x:Key="DataGridTemplate">
<DockPanel HorizontalAlignment="Stretch">
<DataGrid Name="_dataGrid"
AutoGenerateColumns="False" RowHeaderWidth="0" HeadersVisibility="Column" CanUserAddRows="False" GridLinesVisibility="None" HorizontalAlignment="Stretch" KeyboardNavigation.TabNavigation="Cycle">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Col1" MinWidth="75" Width="Auto" KeyboardNavigation.IsTabStop="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox.../> <---Want this guy to size to always fit the selected list item and to expand the entire datagrid if need be w/o displaying horizontal scroll bar.
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Weight" MinWidth="40" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Border >
<TextBox T../>
</Border>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="NN" Width="30">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox .../>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</DockPanel>
</ControlTemplate>
Looks like as per documentation, DataGrid columns only resize in one direction..that is they only get wider, not narrower.