Home / Community & Support / Developer Productivity Tools Forums / WPF > Carousel > Datatemplate in Carousel Binding to RadRichTextBox Question

• Johann

  Posted on Nov 10, 2011 (permalink)

  Hello,
  
  I have a Problem with the Databinding to a RichTextBox that is located in a Datatemplate for a RadCarousel.
  
  Here my Xaml:
  
  

  <DataTemplate x:Key="customItemTemplate">

                      <Border Background="LightSlateGray" Padding="10">

                          <Grid>

                              <Grid.ColumnDefinitions>

                                  <ColumnDefinition Width="*" />                                

                              </Grid.ColumnDefinitions>

                              <Grid.RowDefinitions>

                                  <RowDefinition Height="600" />         

                              </Grid.RowDefinitions>                         

                              <telerik:RadRichTextBox Name="radRichTextBox"

                                      IsReadOnly="True"

                                      HorizontalAlignment="Stretch"

                                      VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="5">

                                  <telerik:RadDocument LayoutMode="Paged">

                                      <telerik:Section PageMargin="10, 10, 10, 10">                                     

                                          <telerik:Paragraph TextAlignment="Left">

                                              <telerik:Span Text="{Binding Redner}" />                                          

                                              <telerik:Span FontWeight="Bold" Text=" RadRichTextBox!" />

                                          </telerik:Paragraph>                                    

                                          <telerik:Paragraph>

                                              <telerik:Span FontWeight="Bold" Text="RadRichTextBox" />

                                              <telerik:Span Text=" is a control that is able to display and edit rich-text content including  formatted  text arranged in pages, paragraphs, spans (runs) etc." />

                                          </telerik:Paragraph>

                                          <telerik:Table LayoutMode="AutoFit">

                                              <telerik:TableRow>

                                                  <telerik:TableCell>

                                                      <telerik:Paragraph>

                                                          <telerik:Span Text="Cell 1" />

                                                      </telerik:Paragraph>

                                                  </telerik:TableCell>

                                                  <telerik:TableCell>

                                                      <telerik:Paragraph>

                                                          <telerik:Span Text="Cell 2" />

                                                      </telerik:Paragraph>

                                                  </telerik:TableCell>

                                              </telerik:TableRow>

                                              <telerik:TableRow>

                                                  <telerik:TableCell ColumnSpan="2">

                                                      <telerik:Paragraph>

                                                          <telerik:Span Text="Cell 3" />

                                                      </telerik:Paragraph>

                                                  </telerik:TableCell>

                                              </telerik:TableRow>

                                          </telerik:Table>

                                      </telerik:Section>

                                  </telerik:RadDocument>

                              </telerik:RadRichTextBox>

                          </Grid>

                      </Border>

                  </DataTemplate>

              </Grid.Resources>

  
  The first Problem is the access to the line with <telerik:Span Text="{Binding Redner}" />
How can I make a Binding from Code-behind to the Controls in the Datatemplate?
The second Question is: How can i Bind the Width from the Carousel-Item to the Variable Monitor-Resolution? I need a Width with max 90% from the Carousel.

  Sorry for my bad English. I hope you now what i mean.
  
  Thank You
  
  
  
  

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on Nov 11, 2011 (permalink)

  Hi Johann,

  RadRichTextBox uses DataProviders to bind the content of the whole document to a string property in a specific file format – XAML, HTML, RTF or plain text. You cannot bind the content of just one Span. More information on data providers and their use is available here. In a nutshell, your data template can be defined as follows:

  <DataTemplate x:Key="customItemTemplate">

      <Border Background="LightSlateGray" Padding="10">

          <Grid>

              <telerikHtml:HtmlDataProvider RichTextBox="{Binding ElementName=radRichTextBox}" Html="{Binding DocumentContent, Mode=TwoWay}" />

              <telerik:RadRichTextBox Name="radRichTextBox" Width="500" Height="300" IsReadOnly="True" HorizontalScrollBarVisibility="Auto" />

          </Grid>

      </Border>

  </DataTemplate>

  
  

  where telerikHtml namespace is defined like this:
  

  xmlns:telerikHtml="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents.FormatProviders.Html"

  
  Using this set-up, setting the DocumentContent property in your view-model to the document you wish to show in the rich text box will be sufficient and you won't need to reference the data template in code-behind at all. Regarding your question about RadCarousel you may create an implicit style targeted at
  CarouselItem and set the desired properties from there, something like the following:
  
  

  <Window.Resources>

      <Style TargetType="telerik:CarouselItem">

          <Setter Property="MaxWidth" Value="90"/>

          <Setter Property="Background" Value="Red"/>

              <Setter Property="Foreground" Value="Blue"/>

          </Style>

      </Window.Resources>

      <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">

          <telerik:RadCarousel ItemsSource="{Binding Collection}" ........../>

      </Grid>

  </Window>

  
  
  Hope this helps! 
  
  Greetings,
  Vanya Pavlova
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

• Johann

  Posted on Nov 11, 2011 (permalink)

  Hi Vanya,
  
  Thank you, this works fine for me.
  
  I have one more question:
  
  In my Datatemplate i have a Border with included Grid. The Border has the right size, but the Controls in the Grid stretch to the whole size of the Border. How can i do this?
  
  Here my Xaml.
  
  

  <DataTemplate x:Key="customItemTemplate">

                      <Border Margin="10">

                          <Grid >

                              <Grid.ColumnDefinitions>

    

                                  <ColumnDefinition Width="Auto" />

                                  <ColumnDefinition Width="*" />

    

                              </Grid.ColumnDefinitions>

                              <Grid.RowDefinitions>

                                  <RowDefinition Height="25" />

                                  <RowDefinition Height="25" />

                                  <RowDefinition Height="25" />

                                  <RowDefinition Height="50*" />

                                  <RowDefinition Height="25" />

                                  <RowDefinition Height="50*" />

                                  <RowDefinition Height="50*" />

                              </Grid.RowDefinitions>

                              <ScrollViewer Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="7" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" >

                                

                              <StackPanel >

                                  <DockPanel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" >

                                      <TextBlock DockPanel.Dock="Left" Text="Redner: " FontWeight="Bold" />

                                      <TextBlock DockPanel.Dock="Left" Text="{Binding Path=Redner}" FontWeight="Bold"/>

    

                                      <TextBlock DockPanel.Dock="Right" Text="{Binding Path=Id}" FontWeight="Bold" />

                                      <TextBlock DockPanel.Dock="Right" Text="Frage-Nr.: " FontWeight="Bold"/>

                                  <TextBlock DockPanel.Dock="Top" Text="   "/>

                                      </DockPanel>

                                      <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10">

                                          <TextBlock Text="Frage:" FontWeight="Bold" Padding="3" />

                              </Border>

                              <TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" Text="{Binding Path=Fragetext}" TextWrapping="Wrap"/>

                                  <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10" HorizontalAlignment="Stretch">

                                          <TextBlock Text="Antwort:" FontWeight="Bold" Padding="3" />

                              </Border>

    

                                      <telerikHtml:HtmlDataProvider RichTextBox="{Binding ElementName=radRichTextBox}" Html="{Binding Path=Antworttext, Mode=TwoWay}" />

                                      <telerik:RadRichTextBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="5"  Name="radRichTextBox" IsReadOnly="True"

                                                              HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch" />

    

                                  </StackPanel>

                              </ScrollViewer>

    

                          </Grid>

                      </Border>

                  </DataTemplate>

  
  
  Thank you

  Reply

• Johann

  Posted on Nov 11, 2011 (permalink)

  Hi Vanya,
  
  Thank you, this works fine for me.
  
  I have one more question:
  
  In my Datatemplate i have a Border with included Grid. The Border has the right size (90% of PanelWidth an Height), but the Controls in the Grid don´t stretch to the whole size of the Border. How can i do this?
  
  Here my Xaml.
  
  

  <DataTemplate x:Key="customItemTemplate">

                      <Border Margin="10">

                          <Grid >

                              <Grid.ColumnDefinitions>

    

                                  <ColumnDefinition Width="Auto" />

                                  <ColumnDefinition Width="*" />

    

                              </Grid.ColumnDefinitions>

                              <Grid.RowDefinitions>

                                  <RowDefinition Height="25" />

                                  <RowDefinition Height="25" />

                                  <RowDefinition Height="25" />

                                  <RowDefinition Height="50*" />

                                  <RowDefinition Height="25" />

                                  <RowDefinition Height="50*" />

                                  <RowDefinition Height="50*" />

                              </Grid.RowDefinitions>

                              <ScrollViewer Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="7" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" >

                                

                              <StackPanel >

                                  <DockPanel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" >

                                      <TextBlock DockPanel.Dock="Left" Text="Redner: " FontWeight="Bold" />

                                      <TextBlock DockPanel.Dock="Left" Text="{Binding Path=Redner}" FontWeight="Bold"/>

    

                                      <TextBlock DockPanel.Dock="Right" Text="{Binding Path=Id}" FontWeight="Bold" />

                                      <TextBlock DockPanel.Dock="Right" Text="Frage-Nr.: " FontWeight="Bold"/>

                                  <TextBlock DockPanel.Dock="Top" Text="   "/>

                                      </DockPanel>

                                      <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10">

                                          <TextBlock Text="Frage:" FontWeight="Bold" Padding="3" />

                              </Border>

                              <TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" Text="{Binding Path=Fragetext}" TextWrapping="Wrap"/>

                                  <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10" HorizontalAlignment="Stretch">

                                          <TextBlock Text="Antwort:" FontWeight="Bold" Padding="3" />

                              </Border>

    

                                      <telerikHtml:HtmlDataProvider RichTextBox="{Binding ElementName=radRichTextBox}" Html="{Binding Path=Antworttext, Mode=TwoWay}" />

                                      <telerik:RadRichTextBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="5"  Name="radRichTextBox" IsReadOnly="True"

                                                              HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch" />

    

                                  </StackPanel>

                              </ScrollViewer>

    

                          </Grid>

                      </Border>

                  </DataTemplate>

  
  
  Thank you

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on Nov 14, 2011 (permalink)

  Hello Johann,

   
  Thank you for sharing this snippet with us! I have just tested the behavior you described, but I was not able to understand what is wrong. I am attaching you several pictures with changes which you may try by your side. Can you verify how the controls in this Border do not stretch even if you remove the predefined Margin of 10 pixels? Most probably I am missing something so it could be great if you share with us a bit more info about your current settings. You may also use the attached project which I used for local testing. 
  
  
  
  

  Regards,
  Vanya Pavlova
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • Border1.png
  • Border2.png
  • WpfApplication6.zip
  • Border3.png

  Reply

• Johann

  Posted on Nov 14, 2011 (permalink)

  Hi Vanya,
  
  I have modified your code.
  
  So can you see what the problem is. The Carousel-Item in my Application stretch to 90% of the Monitor-Resolution. I simulate it in your code with the Height- and Width- properties. The Content of the Carousel-Item marked with the color wont stretch to the Item-size.
  
  I hope now you can understand what i mean.
  
  Here the Code:
  
  

  <Window

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      xmlns:Telerik_Windows_Documents_FormatProviders_Html="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents.FormatProviders.Html"

      x:Class="WpfApplication6.MainWindow"

      x:Name="Window"

      Title="MainWindow"

      Width="1280" Height="720">

  <Window.Resources>

      <Style TargetType="telerik:CarouselItem">

          <Setter Property="Width" Value="900"/>

              <Setter Property="Height" Value="500"/>

          </Style>

      </Window.Resources>

      <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">

          <telerik:RadCarousel Name="RadCarousel1" ItemsSource="{Binding Collection}">

      <telerik:RadCarousel.ItemTemplate>

          <DataTemplate>

             <Border  Margin="10" Background="Crimson">

              <Grid>

                  <Grid.ColumnDefinitions>

      

                      <ColumnDefinition Width="Auto" />

                      <ColumnDefinition Width="*" />

      

                  </Grid.ColumnDefinitions>

                  <Grid.RowDefinitions>

                      <RowDefinition Height="25" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="50*" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="50*" />

                      <RowDefinition Height="50*" />

                  </Grid.RowDefinitions>

                  <ScrollViewer telerik:StyleManager.Theme="Office_Black" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="7" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" >

                                  

                      <StackPanel >

                          <DockPanel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" >

                              <TextBlock DockPanel.Dock="Left" Text="Redner: " FontWeight="Bold" />

                              <TextBlock DockPanel.Dock="Left" Text="{Binding Property1}" FontWeight="Bold"/>

      

                              <TextBlock DockPanel.Dock="Right" Text="{Binding Property1}" FontWeight="Bold" />

                              <TextBlock DockPanel.Dock="Right" Text="Frage-Nr.: " FontWeight="Bold"/>

                              <TextBlock DockPanel.Dock="Top" Text="   "/>

                          </DockPanel>

                          <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10">

                              <TextBlock Text="Frage:" FontWeight="Bold" Padding="3" />

                          </Border>

                          <TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" Text="{Binding Property1}" TextWrapping="Wrap"/>

                          <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10" HorizontalAlignment="Stretch">

                              <TextBlock Text="Antwort:" FontWeight="Bold" Padding="3" />

                          </Border>

      

                          <Telerik_Windows_Documents_FormatProviders_Html:HtmlDataProvider RichTextBox="{Binding ElementName=radRichTextBox}" Html="{Binding Path=Antworttext, Mode=TwoWay}" />

                                      <telerik:RadRichTextBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="5"  Name="radRichTextBox" IsReadOnly="True"

                                                              HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch" />

      

                      </StackPanel>

                  </ScrollViewer>

      

                

      

              </Grid>

          </Border>

          </DataTemplate>

      </telerik:RadCarousel.ItemTemplate>

  </telerik:RadCarousel>

            

      </Grid>

  </Window>

  
  
  Thank you for your help
  
  
  
  

  Reply

• Johann

  Posted on Nov 14, 2011 (permalink)

  Hello,
  
  In the attached modified code you can see the problem.
  
  

  <Window

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      xmlns:Telerik_Windows_Documents_FormatProviders_Html="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents.FormatProviders.Html"

      x:Class="WpfApplication6.MainWindow"

      x:Name="Window"

      Title="MainWindow"

      Width="1280" Height="720">

  <Window.Resources>

      <Style TargetType="telerik:CarouselItem">

          <Setter Property="Width" Value="900"/>

              <Setter Property="Height" Value="500"/>

          </Style>

      </Window.Resources>

      <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">

          <telerik:RadCarousel Name="RadCarousel1" ItemsSource="{Binding Collection}">

      <telerik:RadCarousel.ItemTemplate>

          <DataTemplate>

             <Border  Margin="10" Background="Crimson">

              <Grid>

                  <Grid.ColumnDefinitions>

      

                      <ColumnDefinition Width="Auto" />

                      <ColumnDefinition Width="*" />

      

                  </Grid.ColumnDefinitions>

                  <Grid.RowDefinitions>

                      <RowDefinition Height="25" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="50*" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="50*" />

                      <RowDefinition Height="50*" />

                  </Grid.RowDefinitions>

                  <ScrollViewer telerik:StyleManager.Theme="Office_Black" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="7" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" >

                                  

                      <StackPanel >

                          <DockPanel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" >

                              <TextBlock DockPanel.Dock="Left" Text="Redner: " FontWeight="Bold" />

                              <TextBlock DockPanel.Dock="Left" Text="{Binding Property1}" FontWeight="Bold"/>

      

                              <TextBlock DockPanel.Dock="Right" Text="{Binding Property1}" FontWeight="Bold" />

                              <TextBlock DockPanel.Dock="Right" Text="Frage-Nr.: " FontWeight="Bold"/>

                              <TextBlock DockPanel.Dock="Top" Text="   "/>

                          </DockPanel>

                          <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10">

                              <TextBlock Text="Frage:" FontWeight="Bold" Padding="3" />

                          </Border>

                          <TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" Text="{Binding Property1}" TextWrapping="Wrap"/>

                          <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10" HorizontalAlignment="Stretch">

                              <TextBlock Text="Antwort:" FontWeight="Bold" Padding="3" />

                          </Border>

      

                          <Telerik_Windows_Documents_FormatProviders_Html:HtmlDataProvider RichTextBox="{Binding ElementName=radRichTextBox}" Html="{Binding Path=Antworttext, Mode=TwoWay}" />

                                      <telerik:RadRichTextBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="5"  Name="radRichTextBox" IsReadOnly="True"

                                                              HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch" />

      

                      </StackPanel>

                  </ScrollViewer>

      

                

      

              </Grid>

          </Border>

          </DataTemplate>

      </telerik:RadCarousel.ItemTemplate>

  </telerik:RadCarousel>

            

      </Grid>

  </Window>

  
  Thank you for your help. I hope we can find a solution
  
  

  Reply

• Johann

  Posted on Nov 14, 2011 (permalink)

  Hello,
  
  In the attached modified code you can see the problem.
  
  

  <Window

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      xmlns:Telerik_Windows_Documents_FormatProviders_Html="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents.FormatProviders.Html"

      x:Class="WpfApplication6.MainWindow"

      x:Name="Window"

      Title="MainWindow"

      Width="1280" Height="720">

  <Window.Resources>

      <Style TargetType="telerik:CarouselItem">

          <Setter Property="Width" Value="900"/>

              <Setter Property="Height" Value="500"/>

          </Style>

      </Window.Resources>

      <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">

          <telerik:RadCarousel Name="RadCarousel1" ItemsSource="{Binding Collection}">

      <telerik:RadCarousel.ItemTemplate>

          <DataTemplate>

             <Border  Margin="10" Background="Crimson">

              <Grid>

                  <Grid.ColumnDefinitions>

      

                      <ColumnDefinition Width="Auto" />

                      <ColumnDefinition Width="*" />

      

                  </Grid.ColumnDefinitions>

                  <Grid.RowDefinitions>

                      <RowDefinition Height="25" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="50*" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="50*" />

                      <RowDefinition Height="50*" />

                  </Grid.RowDefinitions>

                  <ScrollViewer telerik:StyleManager.Theme="Office_Black" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="7" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" >

                                  

                      <StackPanel >

                          <DockPanel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" >

                              <TextBlock DockPanel.Dock="Left" Text="Redner: " FontWeight="Bold" />

                              <TextBlock DockPanel.Dock="Left" Text="{Binding Property1}" FontWeight="Bold"/>

      

                              <TextBlock DockPanel.Dock="Right" Text="{Binding Property1}" FontWeight="Bold" />

                              <TextBlock DockPanel.Dock="Right" Text="Frage-Nr.: " FontWeight="Bold"/>

                              <TextBlock DockPanel.Dock="Top" Text="   "/>

                          </DockPanel>

                          <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10">

                              <TextBlock Text="Frage:" FontWeight="Bold" Padding="3" />

                          </Border>

                          <TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" Text="{Binding Property1}" TextWrapping="Wrap"/>

                          <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10" HorizontalAlignment="Stretch">

                              <TextBlock Text="Antwort:" FontWeight="Bold" Padding="3" />

                          </Border>

      

                          <Telerik_Windows_Documents_FormatProviders_Html:HtmlDataProvider RichTextBox="{Binding ElementName=radRichTextBox}" Html="{Binding Path=Antworttext, Mode=TwoWay}" />

                                      <telerik:RadRichTextBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="5"  Name="radRichTextBox" IsReadOnly="True"

                                                              HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch" />

      

                      </StackPanel>

                  </ScrollViewer>

      

                

      

              </Grid>

          </Border>

          </DataTemplate>

      </telerik:RadCarousel.ItemTemplate>

  </telerik:RadCarousel>

            

      </Grid>

  </Window>

  
  Thank you for your help. I hope we can find a solution
  
  

  Reply

• Johann

  Posted on Nov 14, 2011 (permalink)

  Hello,
  
  In the attached modified code you can see the problem.
  
  

  <Window

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      xmlns:Telerik_Windows_Documents_FormatProviders_Html="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents.FormatProviders.Html"

      x:Class="WpfApplication6.MainWindow"

      x:Name="Window"

      Title="MainWindow"

      Width="1280" Height="720">

  <Window.Resources>

      <Style TargetType="telerik:CarouselItem">

          <Setter Property="Width" Value="900"/>

              <Setter Property="Height" Value="500"/>

          </Style>

      </Window.Resources>

      <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">

          <telerik:RadCarousel Name="RadCarousel1" ItemsSource="{Binding Collection}">

      <telerik:RadCarousel.ItemTemplate>

          <DataTemplate>

             <Border  Margin="10" Background="Crimson">

              <Grid>

                  <Grid.ColumnDefinitions>

      

                      <ColumnDefinition Width="Auto" />

                      <ColumnDefinition Width="*" />

      

                  </Grid.ColumnDefinitions>

                  <Grid.RowDefinitions>

                      <RowDefinition Height="25" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="50*" />

                      <RowDefinition Height="25" />

                      <RowDefinition Height="50*" />

                      <RowDefinition Height="50*" />

                  </Grid.RowDefinitions>

                  <ScrollViewer telerik:StyleManager.Theme="Office_Black" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="7" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" >

                                  

                      <StackPanel >

                          <DockPanel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" >

                              <TextBlock DockPanel.Dock="Left" Text="Redner: " FontWeight="Bold" />

                              <TextBlock DockPanel.Dock="Left" Text="{Binding Property1}" FontWeight="Bold"/>

      

                              <TextBlock DockPanel.Dock="Right" Text="{Binding Property1}" FontWeight="Bold" />

                              <TextBlock DockPanel.Dock="Right" Text="Frage-Nr.: " FontWeight="Bold"/>

                              <TextBlock DockPanel.Dock="Top" Text="   "/>

                          </DockPanel>

                          <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10">

                              <TextBlock Text="Frage:" FontWeight="Bold" Padding="3" />

                          </Border>

                          <TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" Text="{Binding Property1}" TextWrapping="Wrap"/>

                          <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" BorderThickness="2" BorderBrush="Black" Margin="0,10,0,10" HorizontalAlignment="Stretch">

                              <TextBlock Text="Antwort:" FontWeight="Bold" Padding="3" />

                          </Border>

      

                          <Telerik_Windows_Documents_FormatProviders_Html:HtmlDataProvider RichTextBox="{Binding ElementName=radRichTextBox}" Html="{Binding Path=Antworttext, Mode=TwoWay}" />

                                      <telerik:RadRichTextBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="5"  Name="radRichTextBox" IsReadOnly="True"

                                                              HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch" />

      

                      </StackPanel>

                  </ScrollViewer>

      

                

      

              </Grid>

          </Border>

          </DataTemplate>

      </telerik:RadCarousel.ItemTemplate>

  </telerik:RadCarousel>

            

      </Grid>

  </Window>

  
  Thank you for your help. I hope we can find a solution
  
  

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on Nov 15, 2011 (permalink)

  Hello Johann,

   
  
  Thank you for sharing this snippet with us! Indeed the problem in this case is that the Border is not stretched, so what you may do is to explictly set the content alignments as shown below:
  
  

  <Window.Resources>

      <Style TargetType="telerik:CarouselItem">

          <Setter Property="Width" Value="900"/>

          <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

          <Setter Property="VerticalContentAlignment" Value="Stretch"/>

         <Setter Property="Height" Value="500"/>

          </Style>

  </Window.Resources>

  Then you may see the result at the attached picture.
  
  
  

  Kind regards,
  Vanya Pavlova
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • RadCarouselStretching.png

  Reply

• Johann

  Posted on Nov 15, 2011 (permalink)

  Hello,
  
  This works.
  
  Thank you  for the very good support.
  
  
  
  
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > Carousel > Datatemplate in Carousel Binding to RadRichTextBox Question