locked
HyperlinkButton with wraped text RRS feed

  • Question

  • Hello,

       I would like to create an HyperlinkButton with warped text. I tried the following:

    <HyperlinkButton>
         <TextBlock Text="{Binding Rubrik}" TextWrapping="Wrap"/>
    </HyperlinkButton>

    The problem is that the result Hyperlink does not get an underline when Mouse on.
    How do you I make it behave exacly like a usual HyperlinkButton but with the text wrapped?

    Thanks in advance,
    Keren

    Tuesday, June 1, 2010 8:02 AM

Answers

  • Hmmm.  I'm not exactly proud of this, but it works...

    Define your hyperlink button like this:

    1    <HyperlinkButton Content="{Binding Rubrik}" Style="{StaticResource HyperlinkButtonStyle1}">
    2       <HyperlinkButton.ContentTemplate>
    3          <DataTemplate>
    4             <TextBlock Text="{Binding}" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" />
    5          </DataTemplate>
    6       </HyperlinkButton.ContentTemplate>
    7    </HyperlinkButton>

    And add this to your resources:

    <Style x:Key="HyperlinkButtonStyle1" TargetType="HyperlinkButton">
       <Setter Property="Foreground" Value="#FF73A9D8"/>
       <Setter Property="Padding" Value="2,0,2,0"/>
       <Setter Property="Cursor" Value="Hand"/>
       <Setter Property="HorizontalContentAlignment" Value="Left"/>
       <Setter Property="VerticalContentAlignment" Value="Top"/>
       <Setter Property="Background" Value="Transparent"/>
       <Setter Property="Template">
          <Setter.Value>
             <ControlTemplate TargetType="HyperlinkButton">
                <Grid Background="{TemplateBinding Background}" Cursor="{TemplateBinding Cursor}">
                   <VisualStateManager.VisualStateGroups>
                      <VisualStateGroup x:Name="CommonStates">
                         <VisualState x:Name="Normal"/>
                         <VisualState x:Name="MouseOver">
                            <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock">
    		    	      <DiscreteObjectKeyFrame KeyTime="0">
                                     <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
    		      	         </DiscreteObjectKeyFrame.Value>
    			      </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
    		        </Storyboard>
    									</VisualState>
    									<VisualState x:Name="Pressed">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Disabled">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOverlay">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="FocusStates">
    									<VisualState x:Name="Focused">
    										<Storyboard>
    											<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Unfocused"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<TextBlock x:Name="UnderlineTextBlock" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" TextDecorations="Underline" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    							<TextBlock x:Name="DisabledOverlay" Foreground="#FFAAAAAA" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Canvas.ZIndex="1"/>
    							<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    							<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
       

     

     

     

    Friday, June 4, 2010 11:00 AM
  • Friday, November 12, 2010 12:17 PM

All replies

  • Hmmm.  I'm not exactly proud of this, but it works...

    Define your hyperlink button like this:

    1    <HyperlinkButton Content="{Binding Rubrik}" Style="{StaticResource HyperlinkButtonStyle1}">
    2       <HyperlinkButton.ContentTemplate>
    3          <DataTemplate>
    4             <TextBlock Text="{Binding}" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" />
    5          </DataTemplate>
    6       </HyperlinkButton.ContentTemplate>
    7    </HyperlinkButton>

    And add this to your resources:

    <Style x:Key="HyperlinkButtonStyle1" TargetType="HyperlinkButton">
       <Setter Property="Foreground" Value="#FF73A9D8"/>
       <Setter Property="Padding" Value="2,0,2,0"/>
       <Setter Property="Cursor" Value="Hand"/>
       <Setter Property="HorizontalContentAlignment" Value="Left"/>
       <Setter Property="VerticalContentAlignment" Value="Top"/>
       <Setter Property="Background" Value="Transparent"/>
       <Setter Property="Template">
          <Setter.Value>
             <ControlTemplate TargetType="HyperlinkButton">
                <Grid Background="{TemplateBinding Background}" Cursor="{TemplateBinding Cursor}">
                   <VisualStateManager.VisualStateGroups>
                      <VisualStateGroup x:Name="CommonStates">
                         <VisualState x:Name="Normal"/>
                         <VisualState x:Name="MouseOver">
                            <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock">
    		    	      <DiscreteObjectKeyFrame KeyTime="0">
                                     <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
    		      	         </DiscreteObjectKeyFrame.Value>
    			      </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
    		        </Storyboard>
    									</VisualState>
    									<VisualState x:Name="Pressed">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Disabled">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOverlay">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="FocusStates">
    									<VisualState x:Name="Focused">
    										<Storyboard>
    											<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Unfocused"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<TextBlock x:Name="UnderlineTextBlock" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" TextDecorations="Underline" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    							<TextBlock x:Name="DisabledOverlay" Foreground="#FFAAAAAA" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Canvas.ZIndex="1"/>
    							<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    							<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
       

     

     

     

    Friday, June 4, 2010 11:00 AM
  • Hi Cleon26,

      Thanks for your reply. I took away the FontSize="20" FontFamily="Comic Sans MS" from both button and style but otherwise copied your solution as it is.

     As you say: IT WORKS! :-) That's what matters.

    Thank you very much for your help and for your solution.

    Keren

    Monday, June 7, 2010 4:53 AM
  • Hi! It quite works for me. The "only" thing is that mouse over and disabled states aren't wrapped.

    I thought it would work if I extended the DataTemplate to other states, like:

    <ContentPresenter x:Name="UnderlineTextBlock" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Visibility="Collapsed" >
    <ContentPresenter.ContentTemplate>
        <DataTemplate>
           <TextBlock Text="{Binding}" TextWrapping="Wrap" TextDecorations="Underline" />
          </DataTemplate>
       </ContentPresenter.ContentTemplate>
    </ContentPresenter>
       <ContentPresenter x:Name="DisabledOverlay"    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Visibility="Collapsed" Canvas.ZIndex="1" >
          <ContentPresenter.ContentTemplate>
             <DataTemplate>
                <TextBlock Text="{Binding}" TextWrapping="Wrap" Foreground="#FFAAAAAA" />
             </DataTemplate>
          </ContentPresenter.ContentTemplate>
       </ContentPresenter>
    <ContentPresenter x:Name="contentPresenter"   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />

    But it still looks the same when mouse over or disabled.

    What can I do?

    TIA

    Friday, October 15, 2010 7:24 PM
  • Try this instead...  I made the disabled color "Red" for now but you can change it to whatever you'd like.

    <Style x:Key="HyperlinkButtonStyle1" TargetType="HyperlinkButton">
       <Setter Property="Foreground" Value="#FF73A9D8"/>
       <Setter Property="Padding" Value="2,0,2,0"/>
       <Setter Property="Cursor" Value="Hand"/>
       <Setter Property="HorizontalContentAlignment" Value="Left"/>
       <Setter Property="VerticalContentAlignment" Value="Top"/>
       <Setter Property="Background" Value="Transparent"/>
       <Setter Property="Template">
          <Setter.Value>
             <ControlTemplate TargetType="HyperlinkButton">
                <Grid Background="{TemplateBinding Background}" Cursor="{TemplateBinding Cursor}">
                   <VisualStateManager.VisualStateGroups>
                      <VisualStateGroup x:Name="CommonStates">
                         <VisualState x:Name="Normal"/>
                         <VisualState x:Name="MouseOver">
                            <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock">
    		    	      <DiscreteObjectKeyFrame KeyTime="0">
                                     <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
    		      	         </DiscreteObjectKeyFrame.Value>
    			      </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
    		        </Storyboard>
    									</VisualState>
    									<VisualState x:Name="Pressed">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Disabled">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Collapsed</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="contentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Collapsed</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOverlay">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="FocusStates">
    									<VisualState x:Name="Focused">
    										<Storyboard>
    											<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Unfocused"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    	
    							
    							<ContentPresenter x:Name="UnderlineTextBlock" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Visibility="Collapsed" >
    								<ContentPresenter.ContentTemplate>
    										<DataTemplate>
    												<TextBlock Text="{Binding}" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" TextDecorations="Underline" />
    									    </DataTemplate>
    								</ContentPresenter.ContentTemplate>
    							</ContentPresenter>
    							
    							<ContentPresenter x:Name="DisabledOverlay"    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Visibility="Collapsed" Canvas.ZIndex="1" >   
    			<ContentPresenter.ContentTemplate>
    		  <DataTemplate>
                 <TextBlock Text="{Binding}" Foreground="Red" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" />
              </DataTemplate>
    		  </ContentPresenter.ContentTemplate>
    															 </ContentPresenter>
    							
    							<ContentPresenter x:Name="contentPresenter"   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}">
              	<ContentPresenter.ContentTemplate>
    		  <DataTemplate>
                 <TextBlock Text="{Binding}" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" />
              </DataTemplate>
    		  </ContentPresenter.ContentTemplate>
    								</ContentPresenter>
    							
    							<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>


     

    Saturday, October 16, 2010 7:57 AM
  • Hi Cleon26,

    it didn't worked for me, now it doesn't wraps anymore. But what's strange is that it don't looks the way you defined it, red, size 20, it doens't read that configuration somehow... Two things I noticed is that HyperlinkButton doesn't declare its TemplateParts and UnderlineTextBlock and DisabledOverlay originally is TextBlock and you declare as ContentPresenter...

    I'm quite lost at that.

    Monday, October 18, 2010 6:55 AM
  • But I am really wondering if HyperLinkButton does have a text property and why we are not using that ?

    Monday, October 18, 2010 6:59 AM
  • There's no Text property, and setting Content to a string doesn't work as we want because it doesn't wraps, that's the very subject of this thread.

    Monday, October 18, 2010 7:38 AM
  • Hello all,

    Maybe there's some confusion here - I'll try to answer everything in one go.

    Here is my code.  It works fine.  If I can figure out how to attach a picture of my screen in this post I will show you.  And BTW - when a control is disabled, it doesn't render it's mouseover effects because the VisualStateManager only allows a control to be in one VisualState at any time (per VisualStateGroup).  So if it's disabled, it obviously can't be normal, or mouseover.

    <UserControl x:Class="SilverlightApplication84.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">
    
    	<UserControl.Resources>
    		
    		<Style x:Key="HyperlinkButtonStyle1" TargetType="HyperlinkButton"> 
       			<Setter Property="Foreground" Value="#FF73A9D8"/> 
       			<Setter Property="Padding" Value="2,0,2,0"/> 
       			<Setter Property="Cursor" Value="Hand"/> 
       			<Setter Property="HorizontalContentAlignment" Value="Left"/> 
       			<Setter Property="VerticalContentAlignment" Value="Top"/> 
       			<Setter Property="Background" Value="Transparent"/> 
       			<Setter Property="Template"> 
          			<Setter.Value> 
             			<ControlTemplate TargetType="HyperlinkButton"> 
                			<Grid Background="{TemplateBinding Background}" Cursor="{TemplateBinding Cursor}"> 
                   				<VisualStateManager.VisualStateGroups> 
                      				<VisualStateGroup x:Name="CommonStates"> 
                         				<VisualState x:Name="Normal"/> 
                         				<VisualState x:Name="MouseOver"> 
                            				<Storyboard> 
                               					<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock"> 
                                  					<DiscreteObjectKeyFrame KeyTime="0"> 
                                     					<DiscreteObjectKeyFrame.Value> 
                                        					<Visibility>Visible</Visibility> 
                                     					</DiscreteObjectKeyFrame.Value> 
                                  					</DiscreteObjectKeyFrame> 
                               					</ObjectAnimationUsingKeyFrames> 
                            				</Storyboard> 
    									</VisualState> 
    									<VisualState x:Name="Pressed"> 
    										<Storyboard> 
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock"> 
    												<DiscreteObjectKeyFrame KeyTime="0"> 
    													<DiscreteObjectKeyFrame.Value> 
    														<Visibility>Visible</Visibility> 
    													</DiscreteObjectKeyFrame.Value> 
    												</DiscreteObjectKeyFrame> 
    											</ObjectAnimationUsingKeyFrames> 
    										</Storyboard> 
    									</VisualState> 
    									<VisualState x:Name="Disabled"> 
    										<Storyboard> 
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock"> 
    												<DiscreteObjectKeyFrame KeyTime="0"> 
    													<DiscreteObjectKeyFrame.Value> 
    														<Visibility>Collapsed</Visibility> 
    													</DiscreteObjectKeyFrame.Value> 
    												</DiscreteObjectKeyFrame> 
    											</ObjectAnimationUsingKeyFrames> 
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="contentPresenter"> 
    												<DiscreteObjectKeyFrame KeyTime="0"> 
    													<DiscreteObjectKeyFrame.Value> 
    														<Visibility>Collapsed</Visibility> 
    													</DiscreteObjectKeyFrame.Value> 
    												</DiscreteObjectKeyFrame> 
    											</ObjectAnimationUsingKeyFrames> 
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOverlay"> 
    												<DiscreteObjectKeyFrame KeyTime="0"> 
    													<DiscreteObjectKeyFrame.Value> 
    														<Visibility>Visible</Visibility> 
    													</DiscreteObjectKeyFrame.Value> 
    												</DiscreteObjectKeyFrame> 
    											</ObjectAnimationUsingKeyFrames> 
    										</Storyboard> 
    									</VisualState> 
    								</VisualStateGroup> 
    								<VisualStateGroup x:Name="FocusStates"> 
    									<VisualState x:Name="Focused"> 
    										<Storyboard> 
    											<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/> 
    										</Storyboard> 
    									</VisualState> 
    									<VisualState x:Name="Unfocused"/> 
    								</VisualStateGroup> 
    							</VisualStateManager.VisualStateGroups> 
             
    	                        <ContentPresenter x:Name="UnderlineTextBlock" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Visibility="Collapsed" > 
    								<ContentPresenter.ContentTemplate> 
    									<DataTemplate> 
    										<TextBlock Text="{Binding}" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" TextDecorations="Underline" /> 
    									</DataTemplate> 
    								</ContentPresenter.ContentTemplate> 
    							</ContentPresenter> 
                                                             
    							<ContentPresenter x:Name="DisabledOverlay" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Visibility="Collapsed" Canvas.ZIndex="1" >    
    								<ContentPresenter.ContentTemplate> 
    	                  				<DataTemplate> 
    										<TextBlock Text="{Binding}" Foreground="Red" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" /> 
    									</DataTemplate> 
    								</ContentPresenter.ContentTemplate> 
    							</ContentPresenter>
    							
    							<ContentPresenter x:Name="contentPresenter"   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}"> 
    	                			<ContentPresenter.ContentTemplate> 
                      					<DataTemplate> 
    	             						<TextBlock Text="{Binding}" FontSize="20" FontFamily="Comic Sans MS" TextWrapping="Wrap" /> 
              							</DataTemplate> 
                      				</ContentPresenter.ContentTemplate> 
    							</ContentPresenter> 
                                                             
    							<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1"/> 
    					
    						</Grid> 
    				
    					</ControlTemplate> 
    				
    				</Setter.Value> 
    			
    			</Setter> 
    		
    		</Style>
    		
    	</UserControl.Resources>
    
    	<StackPanel Background="White">
    
    		<!-- Hyperlink -->
    		<HyperlinkButton Content="This is a hyperlink that will wrap when it needs to." Style="{StaticResource HyperlinkButtonStyle1}" />
    		
    		<!-- Hyperlink - Disabled -->
    		<HyperlinkButton Content="This is a hyperlink that turn red when it's disabled, and will wrap when it needs to." IsEnabled="False" Style="{StaticResource HyperlinkButtonStyle1}" />
    		
    	</StackPanel>
    
    </UserControl>


    Also, there is no "Text" property on a HyperlinkButton because a HyperlinkButton is actually a "ContentControl" capable of displaying much more than just text....  It can display any "Content" you like as long you tell it how to display it.  That is the role of a the "ContentPresenter.ContentTemplate" property and part of the awesomeness of Silverlight/WPF.  Think of it this way - you have a data object that represents a "Person" with properties like "Name", "Age", "Hair Colour".  You can bind the "Content" of a HyperlinkButton to a "Person" but the HyperlinkButton plays dumb and says "I don't know how to show a person"... so you tell it "well write the name here, and the age here" by setting the "ContentTemplate".  (Yes, most of the time people use just text in a hyperlink but that is SO Windows XP!!!  :)

    Somebody asked about why the DisabledTextBlock was changed into a ContentPresenter?  Well, for the same reason the MouseOver one was.  All that's happening in this style is the states are showing/hiding the different content presenters depending on which state the control is in...  If you're confused about that, try to find a tutorial on the VisualStateManager and things should be much clearer.

    Any more questions???

    Monday, October 18, 2010 8:43 AM
  • Well, it works perfectly now...thanks!

    Monday, October 18, 2010 4:31 PM
  • Friday, November 12, 2010 12:17 PM
  • Here http://msdn.microsoft.com/en-us/library/cc296242(VS.95).aspx I made small changes

        <Style x:Key="HyperlinkButtonTextWrapStyle" TargetType="HyperlinkButton">
            <Setter Property="Foreground" Value="#FF0033FF"/>
            <Setter Property="Padding" Value="2,0,2,0"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="HyperlinkButton">
                        <Grid Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <TextBlock x:Name="UnderlineTextBlock"
                                Text="{TemplateBinding Content}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="{TemplateBinding Padding}"
                                FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}"
                                TextDecorations="Underline"
                                Visibility="Collapsed" 
                                TextWrapping="Wrap"/>
                            <TextBlock x:Name="DisabledOverlay" Canvas.ZIndex="1"
                                Text="{TemplateBinding Content}"
                                Foreground="#FFAAAAAA"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="{TemplateBinding Padding}"
                                FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}"
                                Visibility="Collapsed" 
                                TextWrapping="Wrap"/>
                            <TextBlock x:Name="contentPresenter" Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" TextWrapping="Wrap"/>
                            <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    



    I wish successful projects.

    Monday, August 6, 2012 6:59 AM