Generic Formatting and Alignment in XAML based on trigger

Question

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>

Kacper Stachowski · Answer 1 · 2017-10-17T09:56:11.790

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>

I will need to add this convertor in each TextBlock this way. Is there any generic way of doing it? — Safi Mustafa, Oct 17 '17 at 09:48
Just edited my answer to include applying converter to all TextBlocks. I don't think you should do it on a wider scope than DataGrid (or without setting x:Key to style, because it can cause you some problems with other controls that are using TextBlocks inside them). — Kacper Stachowski, Oct 17 '17 at 09:48

Generic Formatting and Alignment in XAML based on trigger

1 Answers1