This is a migrated thread and some comments may be shown as answers.

Setting the Visibility of a DataTemplate Element (TextBlock)

4 Answers 486 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Reid
Top achievements
Rank 2
Reid asked on 23 Jun 2014, 11:06 PM
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

4 Answers, 1 is accepted

Sort by
0
Dimitrina
Telerik team
answered on 24 Jun 2014, 11:10 AM
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.
 
0
Reid
Top achievements
Rank 2
answered on 24 Jun 2014, 02:54 PM
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




0
Accepted
Dimitrina
Telerik team
answered on 25 Jun 2014, 09:00 AM
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.
 
0
Reid
Top achievements
Rank 2
answered on 25 Jun 2014, 02:17 PM
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
Tags
Carousel
Asked by
Reid
Top achievements
Rank 2
Answers by
Dimitrina
Telerik team
Reid
Top achievements
Rank 2
Share this question
or