CODEWITHSUNDEEP
visual-studio-lightswitch
polach.o
polach.o

Reputation: 662

Lightswitch 2011 - control command bar position

By default, Lightswitch 2011 places control's command bar under control as you can see on next picture.

Default place of command bar

Hovewer, I want to place this command bar to the right of the control (next picture).

enter image description here

How do this?

You need create Control Extension, more precisely, Group control extension. So, create Lightswitch Extension Project, add new user control to this project, for example "Control1".

Place this code to Common/Metadata/Controls/Control1.lsml

<Control Name="Control1" 
   SupportedContentItemKind="Group"
   AttachedLabelSupport="DisplayedByControl"
   DesignerImageResource="LightSwitchExtension11.Control1::ControlImage">

    <Control.Attributes>
       <DisplayName Value="Control1" />
    </Control.Attributes>
    <Control.Placeholders>
       <Placeholder DisplayName="Control" Name="ControlTemplate" />      
    </Control.Placeholders>  
</Control>

In XAML of control, we can use horizontally oriented Stack Panel witch will contain some control followed by command bar. For control, we use ContentItemPresenter witch ContentItem property will be binded to first child item (defined as Placeholder in lsml file). For command bar, we use CommandGroupPresenter. We have to update its margin for good layout.

<UserControl x:Class="LightSwitchExtension11.Presentation.Controls.Control1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:framework ="clr-namespace:Microsoft.LightSwitch.Presentation.Framework;assembly=Microsoft.LightSwitch.Client">

    <StackPanel x:Name="rootControl" Orientation="Horizontal">

        <framework:ContentItemPresenter ContentItem="{Binding ChildItems[0]}" />

        <framework:CommandGroupPresenter Commands="{Binding CommandItems}" Margin="5, -3, 0, 0" VerticalContentAlignment="Center"/>

    </StackPanel>

</UserControl>

Now, we have group control witch can show some control followed by command bar. But, default command bar (added by Lightswitch) is still visible. We need collapse this command bar. We can do it in code behind. So, add this code to Control1.xaml.cs.

public Control1()
        {
            InitializeComponent();

            this.SetBinding(MyDataContextProperty, new Binding());

        }

        public object MyDataContext
        {
            get { return (object)GetValue(MyDataContextProperty); }
            set { SetValue(MyDataContextProperty, value); }
        }

        public static readonly DependencyProperty MyDataContextProperty =
            DependencyProperty.Register("MyDataContext", typeof(object), typeof(Control1), new PropertyMetadata(PropChanged));

        public static void PropChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            var container = VisualTreeHelper.GetParent(sender as UserControl);

            var containerParent = VisualTreeHelper.GetParent(container);

            var commandBar = containerParent.GetChildrenByType<CommandGroupPresenter>().FirstOrDefault();

            if (commandBar != null)
            {
                commandBar.Visibility = Visibility.Collapsed;
            }
        }

Method PropChanged is important. This method is called after control's DataContext is binded (because of SetBinding in constructor). We can use VisualTreeHelper.GetParent method for get control, witch should contains default command bar (added by Lightswitch). For get command bar control from this control, we can use extension method GetChildrenByType (see this). If command bar exists, we can easily collapsed it.

Usage is simple. You add new Group do designer. Change control of Group to Control1, set CONTROL placeholder to some control and add commands to command bar as you can see in next picture.

enter image description here

Hope, this helps to somebody.

Upvotes: 0

Views: 755

Answers (1)

Yann Duran
Yann Duran

Reputation: 3879

All you need to do is add an empty RowsLayout (or ColumnsLayout) control, as if you were adding a button where you want it. Then drag the command from the original control's Commands to the new group's Commands.

It's quite simple when you know the trick.

Upvotes: 1

Related Questions