Question

Currently i have a LinearGradientBrush displaying as a bar chart. The problem is on start up of my program (no values from databinding yet) i am getting white bars all across my screen, since the GradientBrush has no values yet and displays this as default.

How exactly do i make sure nothing shows until it actually get its databound values.

How to make this invisible until it get values?

Code of the DataTemplate and the itemsControl where its being used:

 <ItemsControl x:Name="icGrafiek"  
                Margin="0,0,0,0" 
                ItemsSource="{Binding Source={StaticResource Grafiek}}"
                ItemTemplate="{DynamicResource GrafiekItemTemplate}" 
                RenderTransformOrigin="1,0.5" Grid.RowSpan="6" Grid.Column="1"

<DataTemplate x:Key="GrafiekItemTemplate">
            <Grid>
                <Border Height="30" Margin="15" Grid.RowSpan="6">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0.0,0" EndPoint="1.0,0">
                            <GradientStopCollection>                               
                                <GradientStop Offset="0.0" Color="{Binding FillBar, UpdateSourceTrigger=PropertyChanged}" />
                                <GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}"
                                              Color="{Binding FillBar, UpdateSourceTrigger=PropertyChanged}"/>

                                <GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}"
                                              Color="Transparent"/>
                                <GradientStop Offset="1" Color="Transparent" />
                            </GradientStopCollection>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
            </Grid>
        </DataTemplate>

Answer 1

One way to hide the bars until there’s data bound is to use Triggers to set the Visibility depending on some value.

In your DataTemplate:

<DataTemplate x:Key="GrafiekItemTemplate">
    <Grid x:Name="grid">
    ...
    </Grid>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=Value}" Value="{x:Null}">
            <Setter TargetName="grid" Property="Visibility" Value="Collapsed" />
        </DataTrigger>
    </DataTemplate.Triggers>

You may have to use a different value than “Value” for the binding path in the DataTrigger, but this should get you started.