Display message when datagrid is empty

Question

I want to display a simple message in the datagrid when there are no items displaying in the datagrid. Right now I have the following XAML code:

 <xcdg:DataGridControl x:Name="lsvSleutels"
                          ItemsSourceName="Registratiesleutels"
                          ItemsSource="{Binding Source={StaticResource DataViewSource}}"
                          Style="{StaticResource SmbDataGridControlStyle}"
                          IsRefreshCommandEnabled="False"
                          rf:XceedGridService.SettingsKeyName="RegistratieSleutelOverzichtGridKey"
                          rf:XceedGridService.IsGroupingEnabled="True"
                          rf:XceedGridService.ItemContextMenu="{StaticResource ItemContextMenu}"
                          rf:XceedGridService.ItemsContextMenu="{StaticResource ItemsContextMenu}"
                          rf:XceedGridService.GroupBarVisibility="Collapsed"
                          rf:XceedGridService.LoadUserSettings="True"  >
          *columns and stuff*
    </xcdg:DataGridControl>

        <TextBlock x:Name="txtNoDataFound"
                   FontSize="18"
                   Foreground="Blue"
                   Text="No items found"
                   Margin="10,25,20,10"
                   VerticalAlignment="Top"
                   HorizontalAlignment="Center"
                   Visibility="Hidden">
            <TextBlock.Style>
                <Style TargetType="{x:Type TextBlock}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=lsvSleutels, Path=Items.Count}"
                                     Value="0">
                            <Setter Property="Visibility"
                                    Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>

However the message is not showing. My first guess is that there is something wrong with the DataTrigger, but I don't know what. Any ideas? Thanks in advance!

score 0 · Answer 1 · answered Oct 09 '12 at 09:20

Here is a sample code with the listbox control:

 <ListBox x:Name="lsvSleutels">
                <ListBoxItem>asdasdasd</ListBoxItem>
                <ListBoxItem>asdasdasd</ListBoxItem>
                <ListBoxItem>asdasdasd</ListBoxItem>
                <ListBoxItem>asdasdasd</ListBoxItem>
                <ListBoxItem>asdasdasd</ListBoxItem>
                <ListBoxItem>asdasdasd</ListBoxItem>
                <ListBoxItem>asdasdasd</ListBoxItem>
                <ListBox.Style>
                    <Style TargetType="{x:Type ListBox}">
                        <Style.Setters>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListBox">
                                        <Grid>
                                            <ItemsPresenter/>
                                            <TextBlock x:Name="txtNoDataFound"
                                                   FontSize="18"
                                                   Foreground="Blue"
                                                   Text="No items found"
                                                   Margin="10,25,20,10"
                                                   VerticalAlignment="Top"
                                                   HorizontalAlignment="Center"
                                                   Visibility="Hidden">

                                            </TextBlock>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <DataTrigger Binding="{Binding Path=Items.Count, RelativeSource={RelativeSource Self}}" Value="0">
                                                <Setter TargetName="txtNoDataFound" Property="Visibility" Value="Visible" />
                                            </DataTrigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style.Setters>
                    </Style>
                </ListBox.Style>
            </ListBox>

Hope this helps you.

score 0 · Answer 2 · answered May 16 '13 at 13:18

This is happening because of the way the WPF property heirarchy works. A property set at the root level cannot be overridden by the style.

You need to take the visibility="Hidden" property out of your textbox declaration and move it to a setter in the style.

Like this:

<TextBlock x:Name="txtNoDataFound"
               FontSize="18"
               Foreground="Blue"
               Text="No items found"
               Margin="10,25,20,10"
               VerticalAlignment="Top"
               HorizontalAlignment="Center">
        <TextBlock.Style>
            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="Visibility" Value="Hidden" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=lsvSleutels, Path=Items.Count}"
                                 Value="0">
                        <Setter Property="Visibility"
                                Value="Visible"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>a

score 0 · Answer 3 · answered Jul 03 '13 at 17:17

Add InvertBoolToVisibility converter in XAML:

 <utils:InvertBoolToVisibilityConverter x:Key="BoolToVisibility" />

In C#:

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var hasItems = (bool) value;

        return hasItems ? Visibility.Collapsed : Visibility.Visible;
    }

Add line to ControlTemplate:

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGrid}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                        <ScrollViewer x:Name="DG_ScrollViewer" Focusable="false">
                            <ScrollViewer.Template>
                                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Button Command="{x:Static DataGrid.SelectAllCommand}" Focusable="false" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.All}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                        <DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" Grid.Column="1" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" Grid.Row="1"/>
                                        <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Grid.Row="1" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                                        <Grid Grid.Column="1" Grid.Row="2">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>
                                            <ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="1" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>                                            
                                        </Grid>
                                        <!--<TextBlock Grid.ColumnSpan="2" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#FFD9DEE3" Text="No Data Shown" Visibility="{Binding HasItems, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Converter={StaticResource BoolToVisibility}}" />-->
                                    </Grid>
                                </ControlTemplate>
                            </ScrollViewer.Template>
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

Display message when datagrid is empty

3 Answers3