locked
Binding hyperlinked text in custom grid column in Expression 4 Sketchflow RRS feed

  • Question

  • I wanted to make something thought to be a simple thing, but turned to be impossible for me... Using Expression 4 and developing a Silverlight Sketchflow project, also using the Sketchables component, I wanted to make a column in a datagrid containing hyperlinked text.

    I have thoroughly browsed the net and found some solutions, none of those working for me, though. I would be pleased of any help.

    Right now, my relevant portions of the XAML is as follows:

                
    <sdk:DataGridTemplateColumn Header="Link">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>          
                            <TextBlock> 
                                <Hyperlink Command="local"><Run><Run.Text>
                                    <Binding Path="WarningTimestamp" />
                                    </Run.Text></Run>
                                </Hyperlink>
                            </TextBlock>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>

    The problem is that Expression underlines the Hyperlink tags and its contents, with the poor phrasing invalid XML.

    Here is what I tried:

    • Using TextBlock inside Hyperlink: Compiler said it expects inline type.
    • Using InlineUIContainer within Hyperlink. Nothing accepted within.
    • Using Run in several way, not accpeted.
    • Change the wrapper TextBlock to ContentControl or RichTextBox, nothing accepted withing.

    Do you have a simple method (other than coloring text manually) to achieve the goal, to have a column of cells with clickable text in sketchflow style?


    em

    Thursday, March 14, 2013 3:10 PM

Answers

  • Sorry, forgot the binding part:

    <RichTextBox>
    						<Paragraph>
    						<Hyperlink><Run Text="{Binding Property1}" /></Hyperlink>
    						</Paragraph>
    </RichTextBox>

    • Marked as answer by e-Musty Monday, March 18, 2013 11:43 AM
    Thursday, March 14, 2013 4:42 PM
    Moderator

All replies

  • Try this as a starting point to replace the TextBlock:

    <RichTextBox>
    <Paragraph>
    <Hyperlink>sadfsadf</Hyperlink>
    </Paragraph>
    </RichTextBox>

    Thursday, March 14, 2013 4:42 PM
    Moderator
  • Sorry, forgot the binding part:

    <RichTextBox>
    						<Paragraph>
    						<Hyperlink><Run Text="{Binding Property1}" /></Hyperlink>
    						</Paragraph>
    </RichTextBox>

    • Marked as answer by e-Musty Monday, March 18, 2013 11:43 AM
    Thursday, March 14, 2013 4:42 PM
    Moderator
  • Hi Chuck,

    I'm pretty sure I've tested something like this and did not work, but now something happened. I mean, something is displayed, but it is a bit weird: the text box looks like a drop-down or combo, but with the drop-down arrow displayed upward down (so an up arrow on the right). Is there a way to have the rich text box appear without any kinds of borders and the such?

    The other weird thing is that when I replaced the above code with yours (changing Property1 to the real prop name), all rows of the grid started to display the same item from the datasource. Any top on this?


    em

    Thursday, March 14, 2013 5:10 PM
  • Could you post a screenshot?
    Thursday, March 14, 2013 5:34 PM
    Moderator
  • Hi Chuck,

    Yes, of course. BTW, I thought it is the vertical scrollbar, so I switched it off in all affected elements, so my code looks now like this:

    <sdk:DataGridTemplateColumn Header="Link">     
    <sdk:DataGridTemplateColumn.CellTemplate>      
      <DataTemplate ScrollViewer.VerticalScrollBarVisibility="Hidden">             <RichTextBox ScrollViewer.VerticalScrollBarVisibility="Hidden">        
            <Paragraph ScrollViewer.VerticalScrollBarVisibility="Hidden">        
                <Hyperlink ScrollViewer.VerticalScrollBarVisibility="Hidden">
                    <Run ScrollViewer.VerticalScrollBarVisibility="Hidden" Text="{Binding WarningTitle}" />
                </Hyperlink>        
            </Paragraph>       
        </RichTextBox>
      </DataTemplate>     
    </sdk:DataGridTemplateColumn.CellTemplate>    
    </sdk:DataGridTemplateColumn>
    And it looks like this:

    Weird Rich Text Box in a grid


    em

    Thursday, March 14, 2013 5:40 PM
  • There must be another implicit template involved here, because this is what I get for this xaml. If you are editing that column cell template, and you right click the richtextbox, select "edit template -> edit current/edit a copy", you can likely see if there are visuals in some template you aren't expecting.

    <sdk:DataGrid Margin="101,101,124,67" AutoGenerateColumns="False" ItemsSource="{Binding Collection}">
    			<sdk:DataGrid.Columns>
    				<sdk:DataGridTemplateColumn>
    					<sdk:DataGridTemplateColumn.CellTemplate>
    						<DataTemplate>
    							<RichTextBox Background="{x:Null}" BorderBrush="{x:Null}">
    								<Paragraph><Hyperlink><Run Text="{Binding WarningTitle}"/></Hyperlink></Paragraph>
    							</RichTextBox>
    						</DataTemplate>
    					</sdk:DataGridTemplateColumn.CellTemplate>
    				</sdk:DataGridTemplateColumn>
    			</sdk:DataGrid.Columns>
    		</sdk:DataGrid>

    Thursday, March 14, 2013 5:52 PM
    Moderator
  • Hi Chuck,

    I have marked your reply above as answer, since it has answered the original question, however I'd be happy to get some more advices from you.

    I have tried the method you mentioned but did not find anything relevant. Then, just to make sure, I have increased the height of the cell a little bit, and the arrows disappear. Can you imagine the scrollbar can not be disabled when the control is of so low height that Expression thinks it cannot display the text entirely? (If not, I'd detail the control structure for you to help spotting which element may introduce the scrollbar, but now I think the problem was the small height.)


    em

    Monday, March 18, 2013 11:50 AM
  • I see what you are saying now, the RichTextBox has a built in scroll viewer that will display a scroll bar. You can turn it off like this. The key is the "VerticalScrollBarVisiblity="Disabled" on the RichTextBox itself.

    <sdk:DataGrid Margin="101,101,124,67" AutoGenerateColumns="False" ItemsSource="{Binding Collection}" DataContext="{Binding Source={StaticResource SampleDataSource2}}" RowHeight="17">
    			<sdk:DataGrid.Columns>
    				<sdk:DataGridTemplateColumn>
    					<sdk:DataGridTemplateColumn.CellTemplate>
    						<DataTemplate>
    							<RichTextBox VerticalScrollBarVisibility="Disabled">
    								<Paragraph><Hyperlink><Run Text="{Binding Property1}"/></Hyperlink></Paragraph>
    							</RichTextBox>
    						</DataTemplate>
    					</sdk:DataGridTemplateColumn.CellTemplate>
    				</sdk:DataGridTemplateColumn>
    				
    			</sdk:DataGrid.Columns>
    		</sdk:DataGrid>

    Monday, March 18, 2013 1:14 PM
    Moderator
  • Great! I was so dumb I only used Hidden without consulting the help on the diffs between hidden and disabled. Hidden does not adjusts the viewport size to the control size so the scroll bar button was shown since the height was so small that a single line did not completely fit on a line "imagined" by the scrollbar controller.

    em

    Monday, March 18, 2013 1:27 PM