×

Discussion Board

Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Question Creating user control L shaped

    Hey guys,

    I've just created a new windows phone app and needed a special control that has an L shape.
    You can see the closed and open version here: https://plus.google.com/photos/11177...CNraweW5ya_tKg ( I hope the link works )

    So how does the control work, it's a button that will slide open ( or close ) the control and when the control is open, a slider is visible.
    I solved this by just putting a button and a slider with <border> on the page...

    BUT that is the problem, because when I slide the 2 seperate controls with my storyboard, you'll notice a fine line surrounding the button. Because they are 2 controls.

    So my question, anyone an idea on how to join both inside a L shape control? ( geometry path xaml perhaps? )

  2. #2
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    475

    Re: Creating user control L shaped

    what about something like...

    Code:
    Grid
      Border
        Slider
    Button
    and Button has a negative bottom margin to make it appear below the slider?

  3. #3
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Creating user control L shaped

    That's what I have now... A <stackpanel> with the <border><slider> and underneath the <button>

    The problem is that this will not give a nice fluid animation! You'll notice that the border and button are sliding separate! A fine line will appear between the two while the animation is busy.
    So I'm looking for an alternative solution.

  4. #4
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    475

    Re: Creating user control L shaped

    I use the following for simple slide animations...

    Code:
    var translateTransform = new TranslateTransform();
    element.RenderTransform = translateTransform;
    
    Storyboard sb = new Storyboard();
    DoubleAnimation moveAnimation = new DoubleAnimation();
    moveAnimation.EasingFunction = ease;
    moveAnimation.From = from;
    moveAnimation.To = to;
    moveAnimation.Duration = new Duration(TimeSpan.FromSeconds(time));
    
    Storyboard.SetTarget(moveAnimation, translateTransform);
    Storyboard.SetTargetProperty(moveAnimation, new PropertyPath(TranslateTransform.YProperty));
    I find this performs much better than TranslateTransform.

    I found the tip originally from here... http://www.japf.fr/2012/03/introduci...cator-control/
    Last edited by theothernt; 2013-10-06 at 22:04.

  5. #5
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Creating user control L shaped

    Thanks for the tip, but that is also not the problem... I'm only manipulating the container around the button and the slider ( a grid in this case ) and even so, you'll notice that the button and slider border are 'animated' separately.

    So was wondering if something like a canvas or anything could help here?

  6. #6
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    475

    Re: Creating user control L shaped

    Do you have any test code anywhere I can use?

  7. #7
    Nokia Developer Champion
    Join Date
    Mar 2013
    Posts
    419

    Re: Creating user control L shaped

    The easiest workaround likely would be to "simply" take a filled Rectangle with the same background color and place that over the full height of the button and bar above and place it behind both. So even if they don't move exactlly in sync this rectangle will fill up the "opening" that is appearing. Although looking at your screenshot it seems that there is a small line between the button and the top of the screen to begin with and this line is conserved during the animation so perhaps you just need to reduce the top margin of the button (perhaps using a negative value if it's already zero).

  8. #8
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Creating user control L shaped

    Indeed it's that line, I played with the button style xaml without an effect! Your suggestion to geta rectangle seems ok, but than I need to place it at the correct location... will try that when I have the time.

  9. #9
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Creating user control L shaped

    I'll try to upload a test project on github this week!!

  10. #10
    Nokia Developer Champion
    Join Date
    Mar 2013
    Posts
    419

    Re: Creating user control L shaped

    A test project would be great - seeing the actual code is always a big help in solving those kinds of issues.

  11. #11
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Creating user control L shaped

    Ok took me a while, but the test project is up here: https://github.com/Depechie/LShape

  12. #12
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    475

    Re: Creating user control L shaped

    A couple of quick things to try...

    1. I would use fixed sized Grids instead of StackPanels
    2. You can offset the toggle button (eg Margin="0,-1,0,0") which will fix the glitch

  13. #13
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Creating user control L shaped

    I'll try it!

  14. #14
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Creating user control L shaped

    So the margin with -1 has indeed a good impact!

  15. #15
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    475

    Re: Creating user control L shaped

    Quote Originally Posted by Depechie View Post
    So the margin with -1 has indeed a good impact!
    Yeah, my guess is that there's a rounding error while animating as there's nothing wrong with your code - it should work perfectly.

    So, I think the 'quick fix' of Margin="0,-1,0,0" should do nicely

    Onto the next problem, to come with a better name than 'L shaped control' ;-)

Page 1 of 2 12 LastLast

Similar Threads

  1. Circle shaped Icon UI
    By narsi27 in forum Symbian User Interface
    Replies: 8
    Last Post: 2009-12-07, 17:18
  2. EDWIn in capsule-shaped
    By sankalp. in forum Symbian User Interface
    Replies: 2
    Last Post: 2009-11-05, 04:31
  3. capsule-shaped CEikEdwin for s60 5th ed
    By sankalp. in forum Symbian User Interface
    Replies: 1
    Last Post: 2009-11-04, 14:47
  4. creating a simple control and drawing
    By salmanmanekia in forum Symbian C++
    Replies: 14
    Last Post: 2008-04-17, 14:03
  5. Dynamically creating CAknPopupFieldText control
    By sandeep in forum Symbian C++
    Replies: 0
    Last Post: 2005-07-01, 15:34

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •