Intersoft Community - ClientUI - UXDock + MVVM Example and questions

UXDock + MVVM Example and questions

handy@intersoftpt.com — Mon, 11 Apr 2011 21:56:17 GMT

Hello T,

Unfortunately, it cannot be done for now due to limitation in UXDockButton itself in your scenario.
You can refer into the best practice to use StyleSelector in this link.

Regards,
Handy

UXDock + MVVM Example and questions

ktersius — Mon, 11 Apr 2011 04:01:03 GMT

Hi Handy

Could you possibly give me an example of how it should be done?

Regards

UXDock + MVVM Example and questions

handy@intersoftpt.com — Fri, 08 Apr 2011 08:14:42 GMT

Hello,

After discussed with our developer, I don't recommend you to use this approach. UxDockButton is not designed that way. You should not change the control template directly with UXDockSeparator.
We would like to use Style selector for this scenario which would be more elegant.
Unfortunately, there is a limitation to use this approach for now. We would enhance this in our next release.
Also, You can change UXDockSeparator width by changing its width property.

Regards,
Handy

UXDock + MVVM Example and questions

MarTin — Wed, 06 Apr 2011 06:12:35 GMT

Hello,

I will need more time to investigate your issue in order to provide you a solution.

I'll get back to you as soon as possible.

Thank you.

UXDock + MVVM Example and questions

ktersius — Wed, 06 Apr 2011 05:11:21 GMT

I got the separator working with the following style but I'm not sure if it is the best way to do things. Seems like overkill? Also how would I adjust the width of the button? I have tried to make the width of the "separator" smaller but that does not work. Any ideas?

<Style.Triggers>
            <DataTrigger Binding="{Binding IsSeparator}" Value="true" >
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Intersoft:UXDockButton}">
                            <Grid x:Name="RootElement">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.05" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                                            <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.3" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="Normal"/>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver"/>
                                        <VisualState x:Name="Pressed"/>
                                        <VisualState x:Name="HighlightFocused"/>
                                        <VisualState x:Name="Checked"/>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused"/>
                                        <VisualState x:Name="Unfocused"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="KeyboardFocusStates">
                                        <VisualState x:Name="KeyboardUnfocused"/>
                                        <VisualState x:Name="KeyboardFocused">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="KeyboardFocus">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <!--<VisualStateGroup x:Name="TooltipStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.1" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="TooltipShow">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TooltipElement"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="TooltipHide">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TooltipElement"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>-->
                                </VisualStateManager.VisualStateGroups>
                                <MediaElement x:Name="AudioElement" Position="0" SpeedRatio="1"/>
                                <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"/>
                                <Border x:Name="AnimationElement" BorderThickness="1" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0"/>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Ellipse x:Name="GlowElement" Fill="{TemplateBinding GlowingEffectColor}" HorizontalAlignment="Stretch" Opacity="1" VerticalAlignment="Stretch" Panel.ZIndex="-1"/>
                                </Grid>
                                <Border x:Name="Glass" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding GlassBackground}" CornerRadius="{TemplateBinding CornerRadius}" Margin="1"/>
                                <Border x:Name="InnerBorder" BorderBrush="#BFFFFFFF" CornerRadius="{TemplateBinding InnerCornerRadius}" Margin="{TemplateBinding BorderThickness}" Visibility="{TemplateBinding InnerBorderVisibility}"/>
                                <Intersoft:StylishLabel x:Name="TooltipElement" BorderBrush="{x:Null}" Background="#99000000" Content="{TemplateBinding Text}" CornerRadius="8" Foreground="White" FontSize="16" HorizontalAlignment="Center" IsHitTestVisible="False" Opacity="0" Padding="8,2" VerticalAlignment="Center"/>
                                <Grid>
                                    <Border x:Name="StackMenuContainer"/>
                                    <Intersoft:ContentReflector x:Name="ContentReflector" EnableReflection="{TemplateBinding EnableReflection}" ReflectionVisibility="{TemplateBinding ReflectionVisibility}" ReflectionPosition="{TemplateBinding ReflectionPosition}" ReflectionSource="{TemplateBinding Icon}">
                                        <Grid x:Name="ContentContainer">
                                            <Intersoft:ImageLoader x:Name="ImageElement" />
                                            <Intersoft:StylishLabel x:Name="StylishLabel" />
                                            <Intersoft:UXDockSeparator Height="120" Orientation="Vertical"/>
                                            <!--<Intersoft:ImageLoader x:Name="ImageElement" Height="{TemplateBinding ImageHeight}" ImageSource="{TemplateBinding Icon}" ProgressBarHorizontalAlignment="Stretch" ProgressBarVerticalAlignment="Bottom" ProgressTextVisibility="{TemplateBinding ImageLoaderTextVisibility}" ProgressBarMargin="15,0,15,14" UseLoader="{TemplateBinding UseImageLoader}" Width="{TemplateBinding ImageWidth}"/>
                                    <Intersoft:StylishLabel x:Name="StylishLabel" BorderBrush="{x:Null}" Background="{x:Null}" ContentType="{TemplateBinding DisplayMode}" Content="{TemplateBinding Content}" Effect="{x:Null}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ImageMargin="0" ImageWidth="{TemplateBinding ImageWidth}" ImageSource="{TemplateBinding Icon}" ImageHeight="{TemplateBinding ImageHeight}" Margin="{TemplateBinding Padding}" Padding="0" TextImageRelation="{TemplateBinding TextImageRelation}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>-->
                                        </Grid>
                                    </Intersoft:ContentReflector>
                                    <Intersoft:ContentReflector x:Name="StackIndicatorElement" AutoRefresh="False" EnableReflection="{TemplateBinding EnableReflection}" ReflectionVisibility="{TemplateBinding ReflectionVisibility}" ReflectionPosition="{TemplateBinding ReflectionPosition}" ReflectionSource="{TemplateBinding StackIndicatorSource}" Visibility="Collapsed">
                                        <Intersoft:ImageLoader x:Name="StackIndicatorImageElement" ImageSource="{TemplateBinding StackIndicatorSource}" ProgressBarHorizontalAlignment="Stretch" ProgressBarVerticalAlignment="Bottom" ProgressTextVisibility="{TemplateBinding ImageLoaderTextVisibility}" ProgressBarMargin="15,0,15,14" UseLoader="{TemplateBinding UseImageLoader}"/>
                                    </Intersoft:ContentReflector>
                                </Grid>
                                <Grid x:Name="IndicatorElement" HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <Image x:Name="IndicatorImageElement" Height="{TemplateBinding IndicatorHeight}" Margin="{TemplateBinding IndicatorOffset}" Width="{TemplateBinding IndicatorWidth}"/>
                                </Grid>
                                <Border x:Name="DisabledVisualElement" Background="White" CornerRadius="{TemplateBinding CornerRadius}" IsHitTestVisible="False" Opacity="0"/>
                                <Rectangle x:Name="KeyboardFocus" IsHitTestVisible="False" Margin="2" RadiusY="{TemplateBinding CornerRadiusDouble}" RadiusX="{TemplateBinding CornerRadiusDouble}" Stroke="#FF747474" StrokeDashArray="1 1" Visibility="Collapsed"/>
                                <Border x:Name="FocusVisualElement" BorderBrush="#00156174" BorderThickness="1" CornerRadius="{TemplateBinding CornerRadius}" IsHitTestVisible="False"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>

UXDock + MVVM Example and questions

ktersius — Tue, 05 Apr 2011 09:35:56 GMT

Thanks for the updated bins. I now have another issue. I need to add separators in the dock. I have added a datatemplate to the UxDockButton and the separator is created, but when I hover over the separator with my mouse an object null reference exception is thrown..

It seems that there is some kind of mouse over event that gets raised and then causes the exception.

If this is not the way to add a dynamic separator, based on the actual bound item please adivse how it can be done.

<Style x:Key="UXDockButtonStyle1" TargetType="Intersoft:UXDockButton">
        <Setter Property="StackMenuStyle" Value="{StaticResource UXStackMenuStyle1}"/>
        <Setter Property="Command" Value="{Binding MenuClickCommand}"/>
        <Setter Property="CommandParameter" Value="{Binding }"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsSeparator}" Value="true" >
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate>                            
                                <Intersoft:UXDockSeparator Orientation="Vertical"/>                             
                        </ControlTemplate>
                    </Setter.Value>                    
                </Setter>          
            </DataTrigger>
        </Style.Triggers>
</Style>

Also how would one change the tooltip font when you hover over the icon?

UXDock + MVVM Example and questions

handy@intersoftpt.com — Tue, 22 Mar 2011 21:45:02 GMT

Hello,

We are planning to release at the end of month. FYI, I attached a nightly build (disclaimer:on). This hotfix has not been fully tested (not official). We are glad to receive any feedback regarding this hotfix. Hope this helps you to continue your development process.

Regards,
Handy

UXDock + MVVM Example and questions

ktersius — Tue, 22 Mar 2011 03:32:59 GMT

When is the next release due? I would appreciate a hotfix a.s.a.p so that I can go on with my development.

Thanks

UXDock + MVVM Example and questions

MarTin — Mon, 21 Mar 2011 11:18:04 GMT

Hello,

Here is the WPF sample file for commanding scenario.

For your 1st issue about the image of sub items, it is confirmed as a bug in WPF application.

I have reported this issue to the developer team to be investigated further. I believe the hotfix for this issue will be available in the next release. If you urgently need the hotfix, I could send you the nightly build when it is available.

Hope this helps.

Thank you.

UXDock + MVVM Example and questions

ktersius — Thu, 17 Mar 2011 06:57:32 GMT

Hi Martin

Thanks for the project. Unfortunately my project is a WPF project. I had a look at the code and it looks the same as my WPF project code. Would it be possible to provide me with a WPF version of the code you provided?

Edit : I have updated my solution to include a silverlight copy with the exact same code and in the silverlight project everything works fine... So it seems there is a bug in the WPF libraries or I'm doing something wrong. Please have a look.

Regards

UXDock + MVVM Example and questions

ktersius — Tue, 15 Mar 2011 09:15:31 GMT

Where can I get a project sample of UXDock with MVVM? None of the samples use UXDock with MVVM.

I have tried to recreate a project based on the helpfile's MVVM exaple of ButtonObject and ItemObject. It works up to a point but I'm having a couple of issues.

1. The images of the UxDockButtons work file but the images of the sub items(UxStackItem?) do not work, only the text is displayed.

2. How do I link up a click command to the actual ItemObject. I want to be able to add a command to the ItemObject and bind the click event to this command.

Below are the code I'm using as from the example.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:Intersoft="http://intersoft.clientui.com/schemas"
		xmlns:vm="clr-namespace:Intersoft"
		xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
		xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
		xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
		mc:Ignorable="d"
		x:Class="Intersoft.MainWindow"
		x:Name="Window"
		Title="MainWindow"
		Width="640"
		Height="480">
        <Grid x:Name="LayoutRoot" Background="White">
        <Grid.DataContext>
            <vm:MainPageViewModel/>
        </Grid.DataContext>
        <Intersoft:UXDock 
		 ItemsSource="{Binding Buttons}" DisplayMemberPath="Text"  ImageMemberPath="Image" CollectionMemberPath="SubItems"/>
    </Grid>
</Window>

public class ButtonObject: INotifyPropertyChanged
    {
        private ObservableCollection<ItemObject> _subItems;
        private string _text;
        private string _image;
        public ObservableCollection<ItemObject> SubItems
        {
            get { return this._subItems; }
            set
            {
                if (this._subItems != value)
                {
                    this._subItems = value;
                    this.OnPropertyChanged("SubItems");
                }
            }
        }
        public string Text
        {
            get { return this._text; }
            set
            {
                if (this._text != value)
                {
                    this._text = value;
                    this.OnPropertyChanged("Text");
                }
            }
        }
        public string Image
        {
            get { return this._image; }
            set
            {
                if (this._image != value)
                {
                    this._image = value;
                    this.OnPropertyChanged("Image");
                }
            }
        }
        protected void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }

public class ItemObject : INotifyPropertyChanged
    {
        private string _text;
        private string _image;
        public string Text
        {
            get { return this._text; }
            set
            {
                if (this._text != value)
                {
                    this._text = value;
                    this.OnPropertyChanged("Text");
                }
            }
        }
        public string Image
        {
            get { return this._image; }
            set
            {
                if (this._image != value)
                {
                    this._image = value;
                    this.OnPropertyChanged("Image");
                }
            }
        }
        protected void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }

 public class MainPageViewModel : INotifyPropertyChanged
    {
		 public MainPageViewModel()
        {
            this.Buttons = new ObservableCollection<ButtonObject>();
            this.Buttons.Add(new ButtonObject() { Text = "Home", Image = "robot.png" });
            this.Buttons.Add(new ButtonObject() { Text = "Clock", Image = "robot.png" });
            this.Buttons.Add(new ButtonObject() { Text = "Photo", Image = "robot.png" });
            this.Buttons.Add(new ButtonObject() { Text = "Mail", Image = "robot.png" });
            ButtonObject document = new ButtonObject() { Text = "Document", Image = "robot.png" };
            document.SubItems = new ObservableCollection<ItemObject>();
            document.SubItems.Add(new ItemObject() { Text = "Video", Image = "robot.png" });
            document.SubItems.Add(new ItemObject() { Text = "Picture", Image = "robot.png" });
            document.SubItems.Add(new ItemObject() { Text = "Music", Image = "robot.png" });
            document.SubItems.Add(new ItemObject() { Text = "Text", Image = "robot.png" });
            this.Buttons.Add(document);
        }
        private ObservableCollection<ButtonObject> _buttons;
        public ObservableCollection<ButtonObject> Buttons
        {
            get { return this._buttons; }
            set
            {
                if (this._buttons != value)
                {
                    this._buttons = value;
                    this.OnPropertyChanged("Buttons");
                }
            }
        }
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }