You are here:   Forum
Register   |  Login

 

This Forum is ARCHIVE only
For LightSwitch questions,
please use the official forums at:

http://social.msdn.microsoft.com/forums/en-US/lightswitch/threads


Forums

Rounding Button Corners
Last Post 28 Mar 2012 01:46 PM by kbrownfield. 1 Replies.
AddThis - Bookmarking and Sharing Button Printer Friendly
  •  
  •  
  •  
  •  
  •  
Sort:
PrevPrev NextNext
You are not authorized to post a reply.
Author Messages
KirkUser is Offline
New Member
New Member
Send Private Message
Posts:4
Avatar

--
21 Mar 2012 07:27 PM
    Does anyone know how to round the corners of Lightswitch buttons?  By buttons, I mean the regular buttons in a screen, not the command bar buttons on the ribbon control nor the buttons in a Datagrid.  I believe the normal way would be to create a theme containing a implicit style for TargetType="Button" and a ControlTemplate with an outer Border using CornerRadius. I tried that with a style for Button in Jan Van Der Haegen's ExtensionsMadeEasy. I also tried it using my own theme extension. But neither will actually change the style for the buttons in a Lightswitch project--I still get the same ole standard rectangular Lightswitch buttons.

    Finally, I tried creating my own button control extension and, of course, I can certainly set a specific style for it, but I would like it to use the selected Lightswitch theme for brushes, but I can't figure out how to reference a dynamic theme's resource dictionary either.

    Can anyone point me in the right direction?  Any idears would be greatly appreciated.
    KirkUser is Offline
    New Member
    New Member
    Send Private Message
    Posts:4
    Avatar

    --
    28 Mar 2012 01:46 PM
    I finally figured out how to get my Lightswitch button corners rounded.  With a little prompting from Derek Spurlock (if you don't already have the Spursoft Lightswitch Extensions, go get them!), I discovered that if you want to provide style resources beyond colors and fonts, you must have a class that implements IThemeExtension.

    If you follow Microsoft's Walkthrough: Creating a Theme Extension, you will find that you start with a theme XAML file that contains the fonts and color resources for your theme.  You will also find a theme class implementing ITheme that looks something like this:

    Imports System
    Imports System.ComponentModel.Composition
     
    Imports Microsoft.LightSwitch.Theming
     
    Namespace Presentation.Themes
     
        <Export(GetType(ITheme))>
        <Theme(MyTheme.ThemeId, MyTheme.ThemeVersion)>
        Friend Class MyTheme
            Implements ITheme
     
    #Region "ITheme Members"
     
            Public ReadOnly Property ColorAndFontScheme As Uri Implements ITheme.ColorAndFontScheme
                Get
                    Return New Uri("/MyThemeExtension.Client;component/Presentation/Themes/MyTheme.xaml", UriKind.Relative)
                End Get
            End Property
     
            Public ReadOnly Property Id As String Implements ITheme.Id
                Get
                Return MyTheme.ThemeId
                End Get
            End Property
     
            Public ReadOnly Property Version As String Implements ITheme.Version
                Get
                Return MyTheme.ThemeVersion
                End Get
            End Property
     
    #End Region
     
    #Region "Constants"
     
            Friend Const ThemeId As String = "MyThemeExtension:MyTheme"
            Friend Const ThemeVersion As String = "1.0"
     
    #End Region
     
        End Class
     
    End Namespace

    You can then add a very basic button style with rounded corners to the bottom of your theme xaml file:

    <Style TargetType="Button" x:Key="DefaultButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="ButtonBorder"
                           CornerRadius="4"
                           BorderBrush="{StaticResource ButtonBorderBrush}"
                           Background="{StaticResource ButtonBackgroundBrush}">
                        <ContentPresenter Content="{TemplateBinding Content}"
                                                  HorizontalAlignment="Center"
                                                  VerticalAlignment="Center"/>
                    < /Border>
                < /ControlTemplate>
            < /Setter.Value>
        < /Setter>
    < /Style>
     
    <Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}" />


    But if you run and test your extension now, the buttons in your test application will be unaffected by your added style.  To have your style used, you must add a new class to your theme_extension.client project that implements IThemeExtension:

    Imports System.ComponentModel.Composition
    Imports Microsoft.LightSwitch.Theming
     
    Namespace Presentation.Themes
     
        <Export(GetType(IThemeExtension))>
        <ThemeExtension(MyTheme.ThemeId)>
        Friend Class MyStyle
            Implements IThemeExtension
     
            Public Function GetControlStyleResources(themeId As String, themeVersion As String, modules As IEnumerable(Of Microsoft.LightSwitch.Model.IModuleDefinition)) As IEnumerable(Of Uri) Implements IThemeExtension.GetControlStyleResources
                Return New List(Of Uri) From {New Uri("/MyThemeExtension.Client;component/Presentation/Themes/MyTheme.xaml", UriKind.Relative)}
            End Function
        End Class
     
    End Namespace

    Now when you run and test your extension you will see that the buttons have the rounded-corner style!

    If you prefer, as I do, to use ExtensionsMadeEasy so you can modify your theme from inside your Lightswitch application, change the theme class to inherit from EasyThemeWithExtensionExporter instead of EasyThemeExporter and implement IThemeExtension:

    Imports ExtensionsMadeEasy.ClientAPI.Theme
    Imports Microsoft.LightSwitch.Theming
    Imports System.ComponentModel.Composition
     
    Namespace LightSwitchApplication
     
        Public Class MyTheme
            Inherits EasyThemeWithExtensionsExporter(Of MyTheme, MyTheme)
            Implements ITheme, IThemeExtension
     
            Public ReadOnly Property ColorAndFontScheme As Uri Implements ITheme.ColorAndFontScheme
                Get
                    Return New Uri(String.Format("/{0};component/Theme/{1}", Me.GetType.Assembly.FullName.Split(",")(0), "MyTheme.xaml"), UriKind.Relative)
                End Get
            End Property
     
            Public ReadOnly Property Id As String Implements ITheme.Id
                Get
                    Return "My Theme"
                End Get
            End Property
     
            Public ReadOnly Property Version As String Implements ITheme.Version
                Get
                    Return "1.0"
                End Get
            End Property
     
            Public Function GetControlStyleResources(themeId As String, themeVersion As String, modules As IEnumerable(Of Model.IModuleDefinition)) As IEnumerable(Of Uri) Implements IThemeExtension.GetControlStyleResources
                Return New List(Of Uri) From {New Uri(String.Format("/{0};component/Theme/{1}", Me.GetType.Assembly.FullName.Split(",")(0), "MyTheme.xaml"), UriKind.Relative)}
            End Function
     
        End Class
     
    End Namespace

    Either method will allow you to use your own styles for the buttons in Lightswitch.

    Kirk
    You are not authorized to post a reply.


    Latest Microsoft Visual Studio LightSwitch Forum Threads That Have Answers

    I have a table for project meetings (PRJ_MTGS) and I want to get the value of the meeting agenda field (MTG_AGNDA). So in this case, I just need the string value of PRJ_MTG.MTG_AGNDA not the queryable record set. I do not know how to call the method to return the value. The use case is to create a Outlook object which is working fine. But the email body needs the agenda which is a html string. I pass some data points, like the recipient, when I call the handler, but the html string would be too long for this method. myapp.ViewTSA_PRJ_MTG.CreateInvite_execute = function (screen) { window.open("../Web/MeetingInvites.ashx?recip=" + recips ); }; Consider the LINQ query in my c# class handler (.ashx.cs): namespace LightSwitchApplication.Web { /// <summary> /// Summary description for MeetingInvites /// </summary> public class MeetingInvites : IHttpHandler { public void ProcessRequest(HttpContext
    Read more...

    Hi, I have a LightSwitch HTML app that is using an external SQL server as the data source. Because of this all of the Validation properties are greyed out, such as Maximum and Minimum on number fields. So I tried to use Custom Validation:

    partial void MYAmount_Validate(EntityValidationResultsBuilder results)

            {

                ifRead more...


    Hi All, I have my first major LightSwitch HTML app built and am going through and cleaning up some of the minor stuff that has been irritating me. The biggest of those is that if I click on a new row in a table by clicking on an editable Text Box, that Text Box gets focus but then loses it. this is forcing my users to have to click twice to enter data into a text box. Did some reading and possibly what is going on is that the first click selects the new row and the second click actually makes that Text Box editable. Is there a way to give the Text Box back it's focus after the new row has been selected? Or just automatically give the associated Text Box focus anytime a row is selected? I did not see any events that looked like "row selected" or "on click" or anything like that. Thanks, Jeremy
    Read more...

    Hello, i have build a LightSwitch HTML App and want other employees in my company to be able to work with the data. So i thought it would be great if they can "export" the data to excel or csv. I found many options for that, but i am not a developer so i have issues in programming. I know it is possible to easily use power query from excel itself and consume the data over odata feed. So my question is if it is possible and when how, to export the data from lightswitch automatically to excel with a button or something like that? So that the employees not have to open excel and import the data them self? Or are there better possibilities you know that can export the data to the users desktop over a button? Thanks for your help in advance and kind regards, AHLEONIT
    Read more...

    New to Azure. I am trying to publish an existing web app to a virtual directory on Azure. I went to Azure portal - Application Settings, scrolled down and typed in the following virtual directory and location: Funding      site\wwwroot\funding Application is checked. I publish from VS 2103 the same as when I was on my IIS server.  I get an HTTP 500 error first.  If I hit back several times I get the following: Server cannot access application directory 'D:\home\site\wwwroot\funding\'. The directory does not exist or is not accessible because of security settings The directory \funding is not being created.  My publish looks like this: I tried changing the output path of the HTML client to \funding but that did not work either. How do I create the physical path in VS 2013 so the virtual directory will work? Thank you for your time.
    Read more...

    1234
    Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation