Mahapps.metro: ListViewItem styling

[SamOxyPlot]

Styling a listview row.

I want to style a row of a listview. The row contains just a textblock with a background color. I want to get rid of the 'padding'.

I've tried to overrule MetroListViewItem. But it didn't work.

I hope somone can help me out.

Environment

• MahApps.Metro v1.1.2
• Windows 10
• Visual Studio 2015
• .NET Framework 4.5.2

[punker76]

@SamOxyPlot Can you provide your XAML code?

[SamOxyPlot]

Hi @punker76 !

Okay, some background info.

I have a framework control called FwListView. It contains a regular System.Windows.Controls.ListView control.

In my XAML I define the columns.

Like this:

        <fwviews:FwGridViewColumn Header="#">
            <fwviews:FwGridViewColumn.CellTemplate>
                <DataTemplate>
                    <fwcontrols:FwTextBlock BindingProperty="Row" />
                </DataTemplate>
            </fwviews:FwGridViewColumn.CellTemplate>
        </fwviews:FwGridViewColumn>

The DataTemplate contains a FwTextBlock. This is a framework control that contains a normal TextBlock control.

In my styles I removed allready all the padding / margin.

Is there a possibility to reduce the height of a row in the ListView. My goal is to remove the space in the blue color. So the height and width only takes the space the FwTextBlock needs.

Hope you can help!

[punker76]

@SamOxyPlot that's the ListView itself, it adds a Margin of 6 in code behind on left and right of each cell, so you can only prevent this by adding Margin="-6 0" to your CellTemplates

[SamOxyPlot]

@punker76

Do you mean by this?

<Style TargetType="ListViewItem"> <Setter Property="Margin" Value="-6 0" /> </Style>

Didn't work yet.
How can I overrule the MahApp style?

[punker76]

@SamOxyPlot No you must do this in each CellTemplate

<GridViewColumn.CellTemplate>
  <DataTemplate>
    <Grid Margin="-6 0">
    </Grid>
  </DataTemplate>
</GridViewColumn.CellTemplate>

[SamOxyPlot]

@punker76

Almost there: :+1:

<fwviews:FwGridViewColumn Header="#">
            <fwviews:FwGridViewColumn.CellTemplate>
                <DataTemplate>
                    <Grid Margin="-6 0">
                        <fwcontrols:FwTextBlock BindingProperty="Row" />
                    </Grid>
                </DataTemplate>
            </fwviews:FwGridViewColumn.CellTemplate>
        </fwviews:FwGridViewColumn>

I also modified the margin into -6 and some more...

How to get rid off the space on top and bottom?

[punker76]

@SamOxyPlot try this

<Style TargetType="ListViewItem">
  <Setter Property="Padding" Value="0" />
</Style>

[SamOxyPlot]

@punker76
No succes yet with that change.

Is there something else that could add the space on top and buttom. MinHeight or something?

[punker76]

@SamOxyPlot oh yeah MinHeight...

<Style x:Key="MetroListViewItem" TargetType="{x:Type ListViewItem}">
        <Setter Property="Foreground" Value="{DynamicResource BlackBrush}" />
        <Setter Property="Border.BorderBrush" Value="{DynamicResource GrayBrush1}" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Margin" Value="0 0 0 0" />
        <Setter Property="MinHeight" Value="25" />

[SamOxyPlot]

@punker76

    <fwviews:FwListView.Resources>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Padding" Value="0" />
            <Setter Property="MinHeight" Value="10" />
        </Style>
        <Style TargetType="fwcontrols:FwTextBlock">
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0" />            
        </Style>
    </fwviews:FwListView.Resources>

But It doesn't overrule the minHeight property.

Should I do something else to override it? I define the style in my XAML code.

[punker76]

@SamOxyPlot You must inherit from MetroListViewItem style

<Style TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource MetroListViewItem}">
    <Setter Property="Padding" Value="0" />
    <Setter Property="MinHeight" Value="10" />
</Style>

[Kabennsky]

I cant find a resource called MetroListViewItem. I think its now called MahApps.Styles.ListViewItem is that right?

I tried to inherit the ListViewItem style to change its background for one ListView by creating my own style like this:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.ListView.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="BMS.Style.DialogMenuItem" BasedOn="{StaticResource MahApps.Styles.ListViewItem}" TargetType="{x:Type ListViewItem}">
        <Setter Property="Background" Value="{StaticResource DarkMenuBackgroundBrush}" />
    </Style>

</ResourceDictionary>

But it that doesn't work i am getting Ressource "MahApps.Styles.ListViewItem" not found.

[punker76]

@Kabennsky The current source in develop has some breaking changes, so if you use the new style names then you must use also the latest pre-release version. Or you can also inherit from the base style like this

<Style x:Key="BMS.Style.DialogMenuItem" BasedOn="{StaticResource {x:Type ListViewItem}}" TargetType="{x:Type ListViewItem}">
    <Setter Property="Background" Value="{StaticResource DarkMenuBackgroundBrush}" />
</Style>

[Kabennsky]

Wow thanks for the fast Answer, never know that you can inherit like this from the default style of a control. Awesome you saved my day.