Setting the Visibility of a DataTemplate Element (TextBlock)

5 posts, 1 answers
  1. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 23 Jun 2014 Link to this post

    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
  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 24 Jun 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 24 Jun 2014 in reply to Dimitrina Link to this post

    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




  5. Answer
    Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 25 Jun 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  6. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 25 Jun 2014 in reply to Dimitrina Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready