You are here:   Forum
Register   |  Login

 

Forum Notice

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

    HTML Grid Row Color
    12/16/2014 11:28 AM
    Using the HTML table, I'm trying to apply a background color to certain rows based on a value in one of the columns.  I'm using Rohit Agrawal's approach in his blog post, Spice Up Your HTML Client UI With Code.   Basically I'm setting the css background attribute for the row element to the desired color.  The problem I am having is that there is a default alternating row color  being applied of a very light grey.  That is overriding the red color I am trying to set.  In the screen shot below, the first two rows should be colored.  The second row is fine, because it normally does not have a background color due to an alternating row.  The first row, however, is not being colored as desired.  The alternating light grey color is overriding the color I am setting.  Does anyone have any help or insight into this issue?   Thank you, Binu Agrawal 
    Read more...

    Hi, The LS team stopped short of enabling runtime dynamic OData connections, so I thought I'd take a stab at it.  Turns out we can change the Odata Uri at runtime using an event handler for BuildingRequest method of the DataServiceContext.  The following code works to change the Uri at runtime.  Imports System.Data.Services.Client Imports LightSwitchApplication Namespace ApplicationData.ApplicationDataService Partial Public Class ApplicationData Inherits Global.System.Data.Services.Client.DataServiceContext Private Sub OnContextCreated() AddHandler Me.BuildingRequest, AddressOf OnBuildingRequest AddHandler Me.SendingRequest2, AddressOf OnSendingRequest2 End Sub Private Sub OnBuildingRequest(sender As Object, buildingRequestEventArgs As BuildingRequestEventArgs) Dim stUri As String = buildingRequestEventArgs.RequestUri.ToString stUri = Replace(stUri,
    Read more...

    Angularjs in Lightswitch HTML
    12/13/2014 5:59 PM
    I've tried to implement Jan Van Bladels article http://app.pragmaswitch.com/CrudGrid/ng-app/index.html and unlike other articles I have seen this one doesn't seem to involve mvc and app_start and so on, everything is done client side? I am able to access the index.html file at http://localhost:somenumber/HTMLClient/ng-app/index.html If I click the HTML client, I am redirected to the LS Browse screen I set up. There I have one post that I made in the LS client. However I can't seem to get this to show in the custom index.html file? If I click Add, nothing happens no modal window sliding down(guess I must make some .html file for this?), but the save button turns red, if i click this I get an error message saying "An error occured. Cannot read property 'extend' of undefined" However it is saved to the db, but as a blank post. I have uploaded the project to OneDrive https://onedrive.live.com/redir?resid=48547E6FC0593A30%21434 If anyone please could take a look at
    Read more...

    When I link a SharePoint Document Library (on Office 365 / SharePoint Online dev site, same host web as Cloud Business App), I receive the error "Error retrieving document library information" when I try to add a document while running the app in debug mode (comes up as an ajax dialog while I'm in the app). I see the Add Documents button, and when I click it, I get the Word / Excel / PowerPoint / Upload flyout menu, but receive the other error after awhile (30 or more seconds later) when I click one of those four options. Has anyone else seen this before? I  have verified my permissions to the document library. The connections seem to be set up fine, and the GUID column in the source (SQL Azure DB) and the document library (external) are properly related (one SQL entry-to-many Documents). The GUID column in the parent data source is properly populated and displayed.
    Read more...

    Hi I am not able to deploy LightSwitch Cloud Bussiness App to Azure. It gives me the error: An exception occurred when deploying the database for the application. An error occurred during deployment plan generation. Deployment cannot continue. I have tried deploying for two different project as this thread says, but no luck. I have tried creating a new azure website and deploying my app there, but still the error is same. Help Please. Regards, Nirav Nirav Maisuriya SharePoint Developer Evonious Technologies
    Read more...

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