Donotalo
Donotalo

Reputation: 13025

How to bind text alignment in GridViewColumn

I'm using MVVM in a WPF application. I've a UserControl whose DataContext is set to a ViewModel. The UserControl is a table with 3 columns.

enter image description here

This is the following ListView/GridView:

<DockPanel>
        <ListView DockPanel.Dock="Top" ItemsSource="{Binding Items}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                  ctrl:ListViewLayoutManager.Enabled="True">
            <ListView.View>
                <GridView>

                    <GridViewColumn Header="{Binding ColumnHeader1}" 
                                    CellTemplate="{StaticResource cellTemplateColumn1}">
                        <GridViewColumn.HeaderContainerStyle>
                            <Style BasedOn="{StaticResource {x:Type GridViewColumnHeader}}" TargetType="GridViewColumnHeader">
                                <Setter Property="TextBlock.TextAlignment" Value="{Binding Column1HAlignment}" />
                            </Style>
                        </GridViewColumn.HeaderContainerStyle>
                    </GridViewColumn>

                    <GridViewColumn Header="{Binding ColumnHeader2}" 
                                    CellTemplate="{StaticResource cellTemplateColumn2}">
                        <GridViewColumn.HeaderContainerStyle>
                            <Style BasedOn="{StaticResource {x:Type GridViewColumnHeader}}" TargetType="GridViewColumnHeader">
                                <Setter Property="TextBlock.TextAlignment" Value="{Binding Column2HAlignment}" />
                            </Style>
                        </GridViewColumn.HeaderContainerStyle>
                    </GridViewColumn>

                    <GridViewColumn Header="{Binding ColumnHeader3}" 
                                    CellTemplate="{StaticResource cellTemplateColumn3}"
                                    ctrl:RangeColumn.IsFillColumn="True">
                        <GridViewColumn.HeaderContainerStyle>
                            <Style BasedOn="{StaticResource {x:Type GridViewColumnHeader}}" TargetType="GridViewColumnHeader">
                                <Setter Property="TextBlock.TextAlignment" Value="{Binding Column3HAlignment}" />
                            </Style>
                        </GridViewColumn.HeaderContainerStyle>
                    </GridViewColumn>

                </GridView>
            </ListView.View>
        </ListView>

    </DockPanel>

This is achieved by the following resources:

<Style TargetType="GridViewColumnHeader">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                            <TextBlock Text="{TemplateBinding Content}" Margin="5" Width="{TemplateBinding Width}">
                        </TextBlock>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontSize" Value="14" />
        </Style>

        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
        </Style>

        <DataTemplate x:Key="cellTemplateColumn1">
            <fa:ImageAwesome Icon="{Binding IconType}" Foreground="{Binding Status}" Width="10" />
        </DataTemplate>

        <DataTemplate x:Key="cellTemplateColumn2">
            <TextBlock Text="{Binding SerialNumber, StringFormat='0'}" />
        </DataTemplate>

        <DataTemplate x:Key="cellTemplateColumn3">
            <TextBlock Text="{Binding Action}" TextWrapping="Wrap" />
        </DataTemplate>

The text alignments of each column is settable through the view model. I can do this easily for the headers:

<GridViewColumn.HeaderContainerStyle>
    <Style BasedOn="{StaticResource {x:Type GridViewColumnHeader}}" TargetType="GridViewColumnHeader">
        <Setter Property="TextBlock.TextAlignment" Value="{Binding Column1HAlignment}" />
    </Style>
</GridViewColumn.HeaderContainerStyle>

But how can I pass the same parameter (Column1HAlignment) to align the cell's TextBlock contents?

Note the alignment of the 2nd column (where header is #) in the image above. The header is right aligned through data binding. I want the same binding for each cell content.

Upvotes: 0

Views: 339

Answers (1)

mm8
mm8

Reputation: 169200

You could bind the HorizontalAlignment property of the element in the CellTemplate to the Column1HAlignment source property using a {RelativeSource}:

<DataTemplate x:Key="cellTemplateColumn2">
    <TextBlock Text="{Binding SerialNumber, StringFormat='0'}"
                               HorizontalAlignment="{Binding DataContext.Column1HAlignment, 
                                    RelativeSource={RelativeSource AncestorType=ListView}}"/>
</DataTemplate>

Upvotes: 1

Related Questions