Question

This seems trivial, but since the users have requested it:

I have a custom wpf gridview control which is filled with data from a service. Currently, the column that I am trying to change shows a euro sign, a space, and then the amount. However, this looks like this:

  € 0,15  
€ 145,35
 € 65,00
  € 9,50

What I am trying to do is make it look like this:

€   0,15
€ 145,35
€  65,00
€   9,50

I have tried adding a custom number of spaces, but since the font I am using is not Times, the width of the spaces is different from the width of the numbers. I have been trying to find an answer to this tiny problem for hours but I haven’t been able to find it. The column is sortable but not editable.

I have been thinking about laying over a column with a specific number of € signs, putting in a € sign on the left side, adding an extra column to the left containing just the signs (but I don’t have enough room to do that, since I have 3 columns with amounts in them) or maybe a column inside the column in question… Can anyone help me?

My code:

<DataGridTextColumn Header="Amount" SortMemberPath="TotalAmount" Binding="{Binding DisplayTotalAmount, Mode=OneWay}"

Answer 1

You could use a DataGridTemplateColumn instead of DataGridTextColumn, and then design a template that will layout things how you want.

The examples I give are just to give you some ideas to get started.

You might have to adjust depending on how perfect your want your alignment to be e.g. if you want the “,” to be perfectly aligned, then you will have to cut up your currency value into the Euro and cent portions, so that you can place that data into the different elements in the template.

You could use a Converter on a Binding to accept the DisplayTotalAmount, and it will return the Euro only portion, or cents only portion (there are other ways you can do that too).

I have used colours to more clearly show the different parts.

Where I have specified the fixed values (123,99)…replace with a Binding … some example Bindings you might use:

• {Binding DisplayTotalAmount, Mode=OneWay}
• {Binding DisplayTotalAmount, Mode=OneWay, Converter={StaticResource extracteurosconv}}
• {Binding DisplayTotalAmount, Mode=OneWay, Converter={StaticResource extractcentsconv}}
  etc.

If you want an editable version then you would also define a CellEditingTemplate and use a TextBox instead of a TextBlock.

I give you a few examples to show you different ways to do the layout….you can adjust them e.g. add padding, different Widths, etc.

Example 1:

<DataGridTemplateColumn Header="ColumnHeader">
<DataGridTemplateColumn.CellTemplate>
  <DataTemplate>
    <DockPanel LastChildFill="False" Width="70" Background="Green">
      <TextBlock DockPanel.Dock="Left" Text="€"/>
      <TextBlock DockPanel.Dock="Right" Text="123,99" Background="Red"/>
    </DockPanel>
  </DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Example 2:

<DataGridTemplateColumn Header="ColumnHeader">
<DataGridTemplateColumn.CellTemplate>
  <DataTemplate>
     <DockPanel LastChildFill="False" Width="70" Background="Green">
           <TextBlock DockPanel.Dock="Left" Text="€"/>
           <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
               <TextBlock>,</TextBlock>
               <TextBlock Width="20" Background="Red" Text="99"/>
           </StackPanel>
           <TextBlock DockPanel.Dock="Right" Background="Blue" Text="123"/>
  </DockPanel>
  </DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Example 3:

<DataGridTemplateColumn Header="ColumnHeader">
<DataGridTemplateColumn.CellTemplate>
  <DataTemplate>
      <Grid>
      <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="50"/>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="20"/>
      </Grid.ColumnDefinitions>
      <TextBlock Text="€"/>
      <TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="123"/>
      <TextBlock Grid.Column="2" Text=","/>
      <TextBlock Grid.Column="3" Text="99"/>
    </Grid>
  </DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

You can use this bit of XAML to play around in KAXAML with the layout a bit:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel>
<DockPanel LastChildFill="False" Width="70" Background="Green">
           <TextBlock DockPanel.Dock="Left" Text="€"/>
           <TextBlock DockPanel.Dock="Right" Text="123,99" Background="Red"/>
</DockPanel>
<DockPanel LastChildFill="False" Width="70" Background="Green">
           <TextBlock DockPanel.Dock="Left" Text="€"/>
           <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
               <TextBlock>,</TextBlock>
               <TextBlock Width="20" Background="Red" Text="99"/>
           </StackPanel>
           <TextBlock DockPanel.Dock="Right" Background="Blue" Text="123"/>
</DockPanel>
<Grid Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<TextBlock Text="€"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="123" Background="Blue"/>
<TextBlock Grid.Column="2" Text=","/>
<TextBlock Grid.Column="3" Text="99" Background="Red"/>
</Grid>
  </StackPanel>
</Page>