Setting the Visibility of a DataTemplate Element (TextBlock)

[Reid]

Hello,

I have tried binding a TextBlock in a DataTemplate to a member in the ViewModel to change it's visibility but it is not working.  This is for a custom control that contains a RadCarousel where it's ItemTemplate property is set to a StaticResource in the control, the DataTemplate.

Can someone offer a suggestion for the easiest way to change the visibility of a control in a DataTemplate?

Thanks,
Reid

[Dimitrina]

Hello Reid,

You can control the visibility of a TextBlock through a property in your ViewModel. Maybe the bound value is not actually resolved and this is why there is not any effect.

In order to get the Binding still be resolved in your case, you could specify a valid Source for it. You can try defining the ViewModel as a StaticResource and then set it as a Source for the binding.

Regards,
Didie
Telerik

 

 

[Reid]

Hello Didie, thanks for replying.

I have stepped through the code and can confirm that the DataContext of the UserControl and the DataContext of the RadCarousel containted in the UserControl does have the right ViewModel and at no time does that property on the view model object contain a value other than "Hidden". 

Here is the property declaration :
(ToolRibbonGroupViewModel)

private Visibility _toolNameVisibility;
 public Visibility ToolNameVisibility
        {
            get { return _toolNameVisibility; }
            set
            {
                _toolNameVisibility = value;
                OnPropertyChanged("ToolNameVisibility");
             }
       }

Here is the Markup in the DataTemplate:

<Grid  x:Name="GridMainGrid"  Width="300">
        <Grid.Resources>
            <Path
          x:Key="horizontalPath"
          Stretch="Fill"
          Opacity="1"
          Data="M 9,200 C9,200 450,200 450,200 "
          Stroke="#FFB4B4B4"
          StrokeThickness="1"/>
            <DataTemplate x:Name="ToolItemDataTemplate"   x:Key="customItemTemplate">
                <Grid HorizontalAlignment="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Image x:Name="ImgToolImage"  Source="{Binding ToolImageSource}" Width="25" Height="25" Grid.Row="0"/>
                    <TextBlock x:Name="TxtToolName" Text="{Binding Name}" Grid.Row="1" Visibility="{Binding ToolNameVisibility, BindsDirectlyToSource=True}"  />
                </Grid>
            </DataTemplate>


            <Style TargetType="{x:Type telerik:CarouselItem}">
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:CarouselItem}">
                            <StackPanel>
                                <ContentPresenter IsHitTestVisible="True" />
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

                <Setter Property="ToolTip">
                    <Setter.Value>
                        <ToolTip>
                            <StackPanel>
                                <TextBlock Text="{Binding ToolTip.Content}"/>
                            </StackPanel>
                        </ToolTip>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="{x:Type telerik:CarouselItemsControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:CarouselItemsControl}">
                            <Border>
                                <telerik:CarouselScrollViewer
                                x:Name="CarouselContentPresenter"
                                CanContentScroll="True"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Bottom"
                                Background="Transparent"

                                MaxWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadCarouselPanel}}, Path=Width}"
                                HorizontalScrollBarVisibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadCarousel}}, Path=HorizontalScrollBarVisibility}"
                                VerticalScrollBarVisibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadCarousel}}, Path=VerticalScrollBarVisibility}">

                                    <ItemsPresenter
                                    x:Name="ItemsPresenter"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"/>
                                </telerik:CarouselScrollViewer>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <telerik:RadCarousel x:Name="carousel" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden"
                             HorizontalAlignment="Left"
                             ItemsSource="{Binding CarouselTools}"
                             ItemTemplate="{StaticResource customItemTemplate}">
            <telerik:RadCarousel.ItemsPanel>
                <ItemsPanelTemplate>
                    <telerik:RadCarouselPanel Path="{StaticResource horizontalPath}" MaxWidth="195"/>
                </ItemsPanelTemplate>
            </telerik:RadCarousel.ItemsPanel>
        </telerik:RadCarousel>
    </Grid>

Can you spot any errors here?  The "Name" TextBlock remains visible.

Thanks again,
Reid

[Dimitrina]

Hi Reid,

I am still not sure the ToolNameVisibility is resolved correctly in the DataTemplate. Would you please add a Converter to the Binding to ensure you get the exact value you need?

If the value is indeed available, then may I ask you to isolate the issue in a demo project and send it to me? You can open a new support thread and attach the sample there.

Regards,
Didie
Telerik

 

 

[Reid]

After creating the demo I realized that the issue was that the Visibility property was not on the individual "Tool" class that is contained in the ObservableCollection<Tool> that the carousel items were data bound to.

Thanks for your help!

Reid