locked
Hyperlink button states RRS feed

  • Question

  • This is a question I've asked before, but have not been able to find an answer for:

    How do you make a HyperlinkButton indicate which page you're on in a multipage Silverlight app? - I have an app in which the nav hyperlinkbuttons for a page are in a grid on Mainpage.xaml. The different pages in the app appear in a frame within Mainpage. Any buttons I have on the pages themselves can be made to appear pressed with an animation, but I can't do that for the nav buttons which are outside the frame. I find this baffling because the whole time the you're on a specific page in a frame, the nav button for that page is not clickable, which makes sense, and which tells me the application knows which page you're on. So how come you can't apply a 'look' to that button to tell you' You're on this page!!' ?

    And for the love of Pete what do the Focused and Unfocused states of a Hyperlinkbutton do? One would obviously expect that to be what I'm looking for, but they appear to do nothing. And while I'm on the subject, why is there a Pressed state? - it only holds that state while it's pressed, NOT after you release the mouse button; what use is that?

    Ah, there's nothing like a good rant :)

    Tuesday, June 28, 2011 2:14 PM

All replies

  • Is it WPF?

    Tuesday, June 28, 2011 2:19 PM
  • Silverlight
    Tuesday, June 28, 2011 2:27 PM
  • The pressed state is so you can style what it looks like while pressed. The focus states are for keyboard focus I believe.

     

    As far as I know, there is not a built in state to show that an arbitrary targeted frame has the button's target page as its content.

     

    To be sure I understand your question, you want your hyperlinkbuttons to have a different visual when the frame is showing the target of the button?

     

    Tuesday, June 28, 2011 5:52 PM
    Moderator
  • Exactly! I remember Dreamweaver doing this sort of thing with ease.

    And, just to complete my prepoderance of pondering, why would you want a button to look different when clicked?- 'cause it changes back as soon as you release the mouse - Seems kind of pointless...You can make it change for mouseover, which is obviously useful. Pressed just seems to be mouseover with the button clicked.

    Tuesday, June 28, 2011 7:21 PM
  • Exactly! I remember Dreamweaver doing this sort of thing with ease.

    And, just to complete my prepoderance of pondering, why would you want a button to look different when clicked?- 'cause it changes back as soon as you release the mouse - Seems kind of pointless...You can make it change for mouseover, which is obviously useful. Pressed just seems to be mouseover with the button clicked.


    It just provides a visual to the user that clicking the mouse button has actually done something.  And it makes your application look a bit more professional.

     

    If you are using a gradient for your button, just try switching the direction of the gradient on pressed state and you will easily see the advantage of having a pressed state as a visual to your user.

     

    ~Christine

    Tuesday, June 28, 2011 8:13 PM
  • Interesting...thanks for the explanation.

    There's a disabled state too, right? Would it be possible to use that to illustrate which page you're on as I describe above - when you're on a page in a frame its hyperlinkbutton outside the frame is essentially disabled - it doesn't do anything.

     

    Tuesday, June 28, 2011 8:21 PM
  • Interesting...thanks for the explanation.

    There's a disabled state too, right? Would it be possible to use that to illustrate which page you're on as I describe above - when you're on a page in a frame its hyperlinkbutton outside the frame is essentially disabled - it doesn't do anything.

     


    That might easily help you produce the look you are going for.

     

    myButton.IsEnabled = false;

     

    and make sure you turn it back when clicking another button.

     

    myButton.IsEnabled = true;

     

    Enabling and disabling buttons is actually a good practice.  When creating apps for our business, my husband always finds a way to produce an error or break my apps.  So I have to be careful to hide or disable anything I don't want him touching at a certain stage.

     

    Love your attention to detail btw.  Good luck with your app.

     

    ~Christine

    Tuesday, June 28, 2011 9:06 PM
  • Well, I think attention to detailis necessary if you want to produce something reasonably professional-looking :)
    Dealing with anything in code is a big challenge for me - the code below is for the hyplerlinkbuttons that make up my nav menu in mainpage.xaml. Clicking on one changes the frame in which the content appears. I can't really relate what you've illustrated above to the code below. 
    If I look in App.xaml I think I can find the hyperlinkbutton code for my nav buttons, again, not sure where 'myButton.IsEnabled' would go; So how could you change the look of the button depending on which page was showing in the frame?
     
    			<HyperlinkButton Content="Home" Height="16" Margin="8,23,8,0" VerticalAlignment="Top" Style="{StaticResource NewNavHypButton}" NavigateUri="/Lungv5_1;component/Home.xaml" TargetName="frame" Background="{x:Null}" FontSize="14.667"/>
    			<HyperlinkButton Content="Presenting &#xa;Symptoms" Height="39" Margin="8,55,0,0" VerticalAlignment="Top" Style="{StaticResource NewNavHypButton}" NavigateUri="/Lungv5_1;component/PresSymptoms.xaml" TargetName="frame" FontSize="14.667"/>
    			<HyperlinkButton Content="Diagnosing" Margin="8,110,0,121" Style="{StaticResource NewNavHypButton}" NavigateUri="/Lungv5_1;component/Diagnosis.xaml" TargetName="frame" FontSize="14.667"/>
    			<HyperlinkButton Content="Treatment" Margin="8,0,8,90" Style="{StaticResource NewNavHypButton}" NavigateUri="/Lungv5_1;component/Treatment.xaml" TargetName="frame" FontSize="14.667" Height="16" VerticalAlignment="Bottom"/>
    			<HyperlinkButton Content="Key &#xa;Advances" Margin="8,0,0,38" Style="{StaticResource NewNavHypButton}" Height="35" VerticalAlignment="Bottom" NavigateUri="/Lungv5_1;component/KeyAdvances.xaml" TargetName="frame" FontSize="14.667"/>
    			<HyperlinkButton Content="Lung DST" Margin="8,0" Style="{StaticResource NewNavHypButton}" Height="21" VerticalAlignment="Bottom" NavigateUri="/Lungv5_1;component/LungDST.xaml" TargetName="frame" FontSize="14.667"/>
    			<HyperlinkButton Content="Splash Page" Margin="6,0,0,-450" Style="{StaticResource NewNavHypButton}" Height="21" VerticalAlignment="Bottom" NavigateUri="/Lungv5_1;component/MainPage.xaml" TargetName="frame" FontSize="14.667"/>


    Wednesday, June 29, 2011 1:51 PM
  • Hey Kvin.

     

    Well to be honest with you I do not use Sketchflow.  What little I have messed around with Sketchflow, the whole idea is that you can creat fabulous work without having to know code.  The Blend UI creates it all for you.  I say that because what I am about to explain may not be the best solution for you.  There may be a much better way when creating an app using Sketchflow.

    Anways...

    1.  Target one of your buttons by clicking on it in the Objects and Timeline list on the left or by clicking on it in the screen.

    2.  Once it is highlighted, on the right side find the properties tab.  On the top of that tab you will see a button on the far right that looks like a square with a lightning bolt.  When you hover over it, it says "Events".  Click it.

    3.  In the list of available events find the "Click" event and give it a name, no spaces, like "ClickMyFirstButton" and hit enter.  This will bring up your "Code Behind".  A file with a ".cs" extention.

    4.  You'll notice that Blend already created the shell of your method something like this:

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace SilverlightPrototype1Screens
    {
    	public partial class Screen_1 : UserControl
    	{
    		public Screen_1()
    		{
    			InitializeComponent();
    		}
    
    		private void ClickMyFirstButton(object sender, System.Windows.RoutedEventArgs e)
    		{
    			
    		}
    }
    }
    


    5.  In the "ClickMyFirstButton" method, between the curly brackts is where you can do the isEnabled stuff...

    		private void ClickMyFirstButton(object sender, System.Windows.RoutedEventArgs e)
    		{
    			this.myHyperlinkButton.IsEnabled = false;
    			this.mySecongHyperlinkButton.IsEnabled = true;
    		}
    

    6.  And you can add one with a different name for your second button...

    		private void ClickMySecondButton(object sender, System.Windows.RoutedEventArgs e)
    		{
    			this.myHyperlinkButton.IsEnabled = true;
    			this.mySecongHyperlinkButton.IsEnabled = false;
    		}
    
    


    And a hint... I am terrible about remembering exacly what I named my items so typing "this." before each one will bring up a drop down list or the intellisence with a list of items you can choose from.  You could actually leave that out.

     

    But, I am barely a beginner at all this.  There very well could be a much easier and simpler way to accomplish this.

     

    Good Luck!

    ~Christine



    Wednesday, June 29, 2011 3:55 PM
  • OK, I'll give it a whirl (although I'll be doing in VB, not C# - next time I'll definitely use C; it seems VB is getting short shrift these days...)

    Actually, I'm not using Sketchflow at all, but I do try to stick entirely to the Blend IDE and avoid code whenever possible. In this case however it looks like I'll have to get my hands dirty!

    Thanks for your help!

    Wednesday, June 29, 2011 6:49 PM
  • Hello Kvinneby,

    a while ago I published two contributions to the Expression Gallery, which perhaps might be helpful for what you want to achieve. They are a Custom HyperlinkButton and a Custom Attached Dependency Property called IsKeepFocusVisual. Both are for Silverlight. Each of them provides a permanent visual indication when the HyperlinkButton has been clicked and the corresponding page is visible inside a frame. Normally, when a HyperlinkButton is clicked and the visual focus is set on for example a TextBox, a Button or perhaps even on the browser itself, the visual indication for the HyperlinkButton disappears. The two projects I contributed provide a workaround for this situation.

    The two solutions take each different approaches.

    The Custom Control solution is based on a custom control, so this might not be very comfortable to you in the end.

    The Custom Attached Dependency Property solution is my favorite. Because you don't need to build a custom control, but simply take a regular HyperlinkButton and add a new visual state and some code behind to make the logic work.

    Unfortunately I didn't had the time yet to finish writing some detailed articles on how to build each solution on your own using Blend 4 / VS 2010. But I read that you are using VB.NET, so it might help that both projects are written using VB.NET.

    Please let me know, if you have any questions on the solutions. You can email me under silverlaw[at]t-online.de

    Best regards,

    Martin

     

    Wednesday, July 6, 2011 5:07 PM