none
User Control with varying layout

    Question

  •  

    I have a UserControl which contains about a dozen individual sub ui elements. I need to be able to display this userControl in 6 possible layouts (settable under application control). Each layout involves different positioning and sizing for the various sub-elements.

     

    It would be easy to just do all the resizing/repositioning in c#, but I would like our product designers to be able to tweak the sizes/positions using Blend. Defining this as 6 different XAML files seems like very bad design - there would be a huge amount of replication between the 6 files.

     

    I see how I could do it by adding a dependency property and using property triggers, but this seems like a klunky solution and making adjustments using Blend wouldn't be straight-forward.

     

    Is there a way I could do this by defining 6 styles and switching between the styles under program control? From what I can tell styles only can set top level properties and cannot reach down into sub-elements. Or am I missing something?

    Tuesday, May 29, 2007 9:11 PM

Answers

  • When using UserControl you don’t have much options.

     

    However you could do it through a custom control by deriving from Control class. A custom Control is designed to separate the operation logic from the visual representation by using templates. Although building a custom Control is not as simple as building a UserControl, custom Controls provide the most flexibility.

     

    For each visual representation of your control you can create a ControlTemplate, which can be individually edited in Blend.

    Then you can use triggers to select appropriate control template.

     

    More info: http://msdn2.microsoft.com/en-us/library/ms745025.aspx

     

    Example:

    Code Snippet

     

      <ControlTemplate x:Key="Template1" TargetType="{x:Type MyCustomControl}">

        <Grid>[custom template 1]</Grid>

      </ControlTemplate>

     

      <ControlTemplate x:Key="Template2" TargetType="{x:Type MyCustomControl}">

        <Grid>[custom tempate 2]</Grid>

      </ControlTemplate>

     

      <Style TargetType="{x:Type MyCustomControl}">

        <Setter Property="Template">

          <Setter.Value>

            <ControlTemplate TargetType="{x:Type Button}">

              <Grid>[default template]</Grid>

            </ControlTemplate>

          </Setter.Value>

        </Setter>

        <Style.Triggers>

          <Trigger Property="CustomTemplate" Value="1">

            <Setter Property="Template" Value="{StaticResource Template1}" />

          </Trigger>

          <Trigger Property="CustomTemplate" Value="2">

            <Setter Property="Template" Value="{StaticResource Template2}" />

          </Trigger>

        </Style.Triggers>

      </Style>

     

    Wednesday, May 30, 2007 5:28 PM

All replies

  • When using UserControl you don’t have much options.

     

    However you could do it through a custom control by deriving from Control class. A custom Control is designed to separate the operation logic from the visual representation by using templates. Although building a custom Control is not as simple as building a UserControl, custom Controls provide the most flexibility.

     

    For each visual representation of your control you can create a ControlTemplate, which can be individually edited in Blend.

    Then you can use triggers to select appropriate control template.

     

    More info: http://msdn2.microsoft.com/en-us/library/ms745025.aspx

     

    Example:

    Code Snippet

     

      <ControlTemplate x:Key="Template1" TargetType="{x:Type MyCustomControl}">

        <Grid>[custom template 1]</Grid>

      </ControlTemplate>

     

      <ControlTemplate x:Key="Template2" TargetType="{x:Type MyCustomControl}">

        <Grid>[custom tempate 2]</Grid>

      </ControlTemplate>

     

      <Style TargetType="{x:Type MyCustomControl}">

        <Setter Property="Template">

          <Setter.Value>

            <ControlTemplate TargetType="{x:Type Button}">

              <Grid>[default template]</Grid>

            </ControlTemplate>

          </Setter.Value>

        </Setter>

        <Style.Triggers>

          <Trigger Property="CustomTemplate" Value="1">

            <Setter Property="Template" Value="{StaticResource Template1}" />

          </Trigger>

          <Trigger Property="CustomTemplate" Value="2">

            <Setter Property="Template" Value="{StaticResource Template2}" />

          </Trigger>

        </Style.Triggers>

      </Style>

     

    Wednesday, May 30, 2007 5:28 PM
  • i'm sorry, but what is "CustomTemplate" on the style trigger? Is a custom dependency property of type "int" defined in the custom control? for example:

     

    Code Snippet

    public static readonly DependencyProperty CustomTemplateProperty = DependencyProperty.Register("CustomTemplate", typeof(int), typeof(CustomTabControl), new PropertyMetadata(0));

     

     

    Thanx and sorry again Wink
    Monday, March 17, 2008 11:37 AM
  • up.. please who can help me? Big Smile

    Monday, March 17, 2008 2:47 PM