• Accessing Properties and Objects in Silverlight DataTemplates using Loaded and FindName

    Accessing properties and objects in a DataTemplate is not as easy as you would think. Normally the Template is separated from the item that uses it. You can find the DataTemplate as a Resource, but you cannot use the VisualTreehelper on it. DataTemplate dt = Application.Current.Resources["TheDataTemplate"] as DataTemplate;
    int count = VisualTreeHelper.GetChildrenCount(dt); This leads to the error: Reference is not a valid visual DependencyObject. The solution is to use the Loaded event of the outermost container, quite often a Grid and use FindName in the EventHandler to get to Objects inside the DataTemplate and to properties of those: <DataTemplate x:Key="TheDataTemplate">
        <Grid x:Name="TheGrid" Grid.Row="0" Loaded="TheGrid_Loaded">
            //Objects and properties are here…
        </Grid>
    </DataTemplate> //enabling buttons in DataTemplate when Oob en Elevated...
    private void TheGrid_Loaded(object sender, RoutedEventArgs e)
    {
        if (Application.Current.IsRunningOutOfBrowser)
        {
            if (Application.Current.HasElevatedPermissions)
            {
                Grid grd = sender as Grid;

                if (grd != null)
                {
                    Button c = grd.FindName("btnCall") as Button;
                    c.IsEnabled = true;
                    Button m = grd.FindName("btnMail") as Button;
                    m.IsEnabled = true;
                    Button p = grd.FindName("btnCopy") as Button;
                    p.IsEnabled = true;
                    Button v = stp.FindName("btnVCard") as Button;
                    v.IsEnabled = true;             }
            ...

    Full story

    Comments (3)

  • ScreenMachine in Silverlight Showcase

    It took a while, but my personal porftolio in Silverlight called ScreenMachine, has appeared in The Silverlight showcase. You can also reach it through the ADdendum blog, too. When you select The Netherlands as Geography in the left menu of the Showcase you can find it as fourth on the first row (for now). Njoy!

    Full story

    Comments (0)

  • Silverlight en Expression Insiders, de user group voor Silverlight Designers

    Sinds Silverlight 1.1 in beta uitkwam, is mijn doel geweest om mooie en krachtige internetapplicaties te maken met de Expression tools en Silverlight. Gelukkig sluit dat aan op mijn werkzaamheden als senior designer bij Macaw, waar we de afgelopen jaren veel mooie WPF- en Silverlight-projecten hebben mogen uitvoeren voor verschillende opdrachtgevers. Ik ben er van overtuigd dat Silverlight ongekende mogelijkheden biedt om indrukwekkende userinterfaces te creëren. Juist dat ongekende houdt me bezig. Daardoor schrijft in artikelen, waarin in webdesigners van Nederland probeer te vertellen wat je allemaal kan creëeren en bereiken met XAML als taal, Silverlight als techniek en Expression Studio als tools. Daarom is het ook logisch dat ik bestuurslid ben van de Silverlight en Expression Insiders. Ik verwacht dat er meer ontwerpers zijn als ik. Ik heb groot respect voor de software die Adobe in de markt zet. De Creative Suite is onmisbaar als het gaat om de creatie van bitmap- en vectorillustraties. Zelf gebruik in geen Mac, maar heb er in het verleden wel mee gewerkt en vind het mooie apparaten. Vanuit mijn werk en de relatie van mijn werkgever met Microsoft is het gebruiken van een Mac op z’n zachts gezegd onhandig. Als ontwerper bedien ik ...

    Full story

    Comments (0)

  • Top 10 Silverlight 4 beta features for Designers

    Silverlight 4 beta is out and delivers several new features for programmers, media people and designers. As a designer I was most interested in some specific features, so I’d like to share my top 10 with you.
    10. Command property on buttons and hyperlink
    I’ll have to explain this one. John Papa’s whitepaper only speaks of the MVVM pattern context, but in the WPF world commands are well known. Actually it is a feature not unlike Behaviors, because they encapsulate programming code in a simple property on a button or a hyperlink. The action that follows when clicking that button or hyperlink is determined by the command. Also, it is possible to include a parameter that the command can use. Thus it is used more dynamically and is more flexible. When developers create commands, designers can easily connect them as a simple property of a button or hyperlinkbutton. <Button Content="Load" Width="120"
            Command="{Binding LoadProductsCommand}"
            CommandParameter="{Binding Path=Text, ElementName=MyFilterTextBox}"/>
    9. StringFormat, TargetNullValue, FallbackValue on Data Binding
    Again, maybe not straightforward, but these additions to the data binding functionality of Silverlight helps designer to format the results of data binding with more ease. TargetNullValue will show a value when the binding has ...

    Full story

    Comments (198)

  • Tip: Set DesignWidth and DesighHeight when styling Silverlight 3 controls

    I rediscovered the usefulness of the DesignWidth and DesignHeight Blend properties while styling several controls. Next time you are looking at a very small ControlTemplate in Resource Editing Mode in Expression Blend, don’t forget to set the design-time width and height. It will make your life easier. You can set it at the expected size of the control in de real interface and you can work in the control and see a reasonably sized control. Styling a TabItem, for instance, will show the tab at the MinimumWidth en MinimumHeight of 10 pixels, leaving you a 10x10 pixel tab to work with. Setting the DesignWidth and DesignHeight properties on the root grid of the control to, say 150 and 25 gives you  room to work with and a more realistic view on the tab. <ControlTemplate TargetType="TabItem">
        <Grid x:Name="Root" d:DesignWidth="150" d:DesignHeight="25"> This needs the Blend NameSpaces at the top of the page to work: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Njoy!

    Full story

    Comments (1834)

  • Silverlight Style: GlassBorderStyle

    Created a simple, but nice Glass Border for a panel in my current Silverlight 3 project. I’d like to share it with you…       <Style x:Key="GlassBorderStyle" TargetType="Border">
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.75,1" StartPoint="0.25,0">
                    <GradientStop Color="#33FFFFFF" Offset="0"/>
                    <GradientStop Color="#C0FFFFFF" Offset="0.287"/>
                    <GradientStop Color="#4011322D" Offset="0.683"/>
                    <GradientStop Color="#33FFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#5811322D" Offset="0"/>
                    <GradientStop Color="#3EFFFFFF" Offset="0.25"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.5"/>
                    <GradientStop Color="#3EFFFFFF" Offset="0.75"/>
                    <GradientStop Color="#BFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect BlurRadius="3" ShadowDepth="3" Opacity="0.5"/>
            </Setter.Value>
        </Setter>
    </Style>   To use this style:   <Border x:Name="GlassBorder" Height="100" Width="100" CornerRadius="10" Style="{StaticResource GlassBorderStyle}">
        <Button Content="OK"/>
    </Border>   Njoy!

    Full story

    Comments (442)

  • Fun with Twitter Logo

    Full story

    Comments (0)

  • 10 Silverlight loading animations using percentages (HBSL3 Addendum 1)

    Following Mike Taulty’s rant avoiding the “Blue Balls” when loading a Silverlight application, I’ve been thinking about what ways you’d have to show a loading animation (a.k.a. Splash Screen :) using the progress percentage in a meaningful way. The idea was to come up with 10 way to do this and it proved to be harder than I thought. I’ve made a little sketch that is a little further down this post, but first let’s have a look at how to show this. Actually is it XAML only, because the application is not loaded yet, so it can only use Javascript code behind. Creating a XAML-file and a JS-file in your Web project is enough. Create a new XAML file called SplashScreen.xaml without code behind and a Grid or Canvas as the outer container. Place a Textbox to show a percentage and some Rectangles to show the progress.
    <Canvas
        xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>
        xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml"</a>
        Width="640" Height="480" Background="White">
      <Canvas Canvas.Top="100" Canvas.Left="100" Width="440" Height="280">
        <Rectangle x:Name="rctProgressBarTrack" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Silver" />
        <Rectangle x:Name="rctProgressBar" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Red">
          <Rectangle.RenderTransform>
              <ScaleTransform x:Name="rctProgress" ScaleX="0" ScaleY="1"/>
          </Rectangle.RenderTransform>
        </Rectangle>
        <TextBlock x:Name="txtStatus" Height="20" Canvas.Top="55" Canvas.Left="125" Text="Loading: ...

    Full story

    Comments (1)

  • Use initParams to swap ResourceDictionaries and load a Theme in Silverlight 3

    I’ve been looking for a way the use themes just swapping ResourceDictionaries (RD’s) for some time. Now, with Silverlight 3 being able to use MergedDictionaries, this becomes possible. It’s still not Blendable, because Blend can only use RD’s with Build Action Resource and not Content. This is annoying enough to give it another go another time. You can use the workaround of having a copy of the default RD in your App.xaml file or using a different RD with build action as Resource for use with Blend only. Want you ultimately want is to address the RD’s as Resource…   This method can help you when you:
    • want to load a theme once on application startup
    • want to set the theme as an initParam on the Silverlight plug-in
    • don’t want to use implicit styling: you’ll need two or more RD’s with identically named Styles and Resources
    Restrictions of this method are:
    • Not Blendable (yet), but workarounds exist
    • You have to use one Default theme (which can have any name you want).
    • You cannot dynamically update the theme: you can set a certain theme only once at application startup.
    If this is the method for you, this is what you need ...

    Full story

    Comments (1)

  • SketchFlow Behaviors CheatSheets

    Personally, I think that not enough Behaviors for Blend and SketchFlow are available, but luckily Christian Schormann recently presented some SketchFlow Behaviors that make Conditional Navigation and Global States possible in SketchFlow prototypes. For my workshop on SketchFlow for PICNIC09, I created two CheatSheets in SketchFlow, because working with Behaviors is too complex to explain quickly in a workshop. Since the workshops are done, I’d like to share these CheatSheets with you so you can learn quickly how to use the behaviors Christan created. The Conditional Navigation behaviors enables you to navigate to a different screen based on a TargetScreen variable that is set using events in the interface. The Global State behavior is similar but makes it possible to navigate to a screen that shows a particular state, depending on a GlobalState variable, setting the state. If you can’t reach a result using these cheatsheet, please read the explanation from Christan on his blog. Check out the CheatSheets and enjoy using SketchFlow!

    Full story

    Comments (0)

  1. 1
  2. 2
  3. Next page