Intersoft Community - ClientUI - Using UXCallOut to edit TreeItems

Using UXCallOut to edit TreeItems

yudi — Sun, 05 May 2013 22:18:09 GMT

Glad to hear that the idea to set the TargetElement of CallOut to the TextBlock of UXTreeViewItem’s header helps.

Should you need further assistance or run into any technical problems regarding our controls, feel free to post it into our community site. We would be happy to assist you again.

Using UXCallOut to edit TreeItems

MikeTurrento — Sat, 04 May 2013 07:21:57 GMT

Hy Yuri,

thx for your replay ... that do it!

Again big thx!

cheers mike

Using UXCallOut to edit TreeItems

yudi — Fri, 26 Apr 2013 08:00:33 GMT

Deeply apologize for the delay in sending this.

I have managed to reproduce the reported problem in my local end. From another point of view, it is not CallOut control’s fault which causes the pointer doesn’t fit properly. The explanation is as follow: the TargetElement property of CallOut is set to the SelectedElement of UXTreeView. When user expands the node of UXTreeView, the SelectedElement becomes bigger (since it has sub-nodes displayed). The pointer position of CallOut is set to be middle-aligned against the TargetElement. So when the element becomes larger, the pointer position will no longer point to the parent node.

I will have this discussed with the ClientUI development team. I will get back to you on Monday with the result.

Edited on April 29, 2013 9:00 AM
Reason: Update Latest Status

There is a possibility to implements the desired scenario. The idea is to set the TargetElement to the TextBox or Label of UXTreeViewItem's header.

I'm currently testing the possibility mentioned above in a simple sample. I will soon update the result.

Edited on April 30, 2013 5:30 AM
Reason: Update Latest Status 2

I have managed to implement the idea which was described on my previous post.

Following shows the step-by-step to modify the UXTreeView control based-on the required scenario.

Use TextBlock as the ItemTemplate of UXTreeView

I modified the sample sent on April 5, 2013 by adding TextBlock as the ItemTemplate of UXTreeView. (snippet code shown below)

<Intersoft:UXTreeView x:Name="SampleControl1" Intersoft:DockPanel.Dock="Left" ItemsSource="{Binding OutLookNavigation}"
                        CollectionMemberPath="Nodes" ImageMemberPath="Image"
                        SelectedValuePath="Name" SelectedValue="{Binding SelectedValue, Mode=TwoWay}"
                        SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                        Background="{x:Null}"
                        BorderThickness="0" SelectionChanged="SampleControl1_SelectionChanged">
    <Intersoft:UXTreeView.ItemTemplate>
        <DataTemplate>
            <TextBlock x:Name="TextBlockContainer" Text="{Binding Name}" />
        </DataTemplate>
    </Intersoft:UXTreeView.ItemTemplate>
    <Intersoft:UXTreeView.ItemContainerStyle>
        <Style TargetType="Intersoft:UXTreeViewItem">
            <!--<Setter Property="DisplayMemberPath" Value="Name" />-->
            <Setter Property="CollectionMemberPath" Value="Nodes" />
            <Setter Property="DisplayMode" Value="ContentAndImage" />
            <Setter Property="ImageMemberPath" Value="Image" />
            <Setter Property="IsExpanded" Value="True" />
        </Style>
    </Intersoft:UXTreeView.ItemContainerStyle>
</Intersoft:UXTreeView>

Set TargetElement to TextBlock

In the code behind, use the snippet code below to set the TargetElement to TextBlock.

private void SampleControl1_SelectionChanged(object sender, Intersoft.Client.Framework.SelectionChangedEventArgs e)
{
    UXTreeView myTreeView = sender as UXTreeView;
    if (myTreeView != null && myTreeView.SelectedElement != null)
    {
        UXTreeViewItem selectedItem = myTreeView.SelectedElement as UXTreeViewItem;
        if (selectedItem != null)
        {
            TextBlock textBlock = Utility.FindVisualDescendant(selectedItem, typeof(TextBlock)) as TextBlock;
            if (textBlock != null)
                this.SampleControl2.TargetElement = textBlock;
        }
    }
}

Now the CallOut will have the target element to TextBlock instead of the UXTreeViewItem. Visually it will generate result as expected.

I enclosed the modified version of UXPage1.xaml and UXPage1.xaml.cs as attachment. Please feel free to let me know whether it helps or not.

Using UXCallOut to edit TreeItems

MikeTurrento — Tue, 16 Apr 2013 02:44:34 GMT

Hy Yudi!

do you found some workaround for the CallOut pointer problem?

Thx Mike

Using UXCallOut to edit TreeItems

yudi — Mon, 08 Apr 2013 08:08:10 GMT

Thank you for the prompt reply.

I forgot to adjust the pointer position of CallOut in my previous sample but it seemed that you have managed to modify it properly.

About the reported problem, where the pointer of CallOut doesn’t refer on the proper selected item when CallOut item is expanded, I will try to reproduce this on my local sample and provide you with solution or workaround.

Using UXCallOut to edit TreeItems

MikeTurrento — Sat, 06 Apr 2013 10:01:03 GMT

Hy Yudi!

I have found a solution based on your sample project and the example of the CallOut TargetElement (see parent thread)

Once again thank you for the example.

I do it with a Intersoft.CallOut and animate the pointer. That feels great on the UI. :)

One last question:

The animated pointer of the CallOut control doesn't fit exactly with the selected Item.

When the selected item of the tree isn't expand, the pointer is fitting to the item (see picture_4).

But when a tree item is expand, the pointer goes - i think - to the middle of the hight of the expanded tree item. (see picture_5)

Is there a possibility that the pointer remains at the position of the selected tree item, even if it is expanded?

Cheers

Mike

Using UXCallOut to edit TreeItems

MikeTurrento — Sat, 06 Apr 2013 05:19:25 GMT

Hy Yudi!

Thx for the sample project.

You use a Intersoft:CallOut in the sample. I want to use a Intersoft:UXCallOut instead of Intersoft:CallOut because the user experience is better and the PointerPosition follow the TreeItem I have selected.

Is that also possible? I fail because the UXCallOut only works with MouseOver effect. But not when I select a new TreeItem.

Currently I use this xaml code to show a UXCallOut with MouseOver effect. I would like to change this behavior so that the contents of the UXCallOut only changes when I select another TreeItem.

<Local:HierarchyTemplateSelector x:Key="ItemTemplateSelector">
    <Local:HierarchyTemplateSelector.AnlagenbaumItemTemplate>
        <Local:HierarchicalDataTemplate ItemsSource="{Binding Kinder}">
            <Intersoft:UXCallOut HorizontalAlignment="Center" VerticalAlignment="Center" 
			 IsOpen="False" MouseClickAction="None"
			 MouseEnterAction="ShowPopup" MouseLeaveAction="HidePopup" 
			 DisableOverlay="True" PreferredPosition="Right">
                <Intersoft:UXCallOut.CallOutEffect>
                    <DropShadowEffect BlurRadius="9" ShadowDepth="12"/>
                </Intersoft:UXCallOut.CallOutEffect>
                <Intersoft:UXCallOut.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding BildPfad}" Style="{StaticResource ImageStyle}" />
                        <TextBlock Text="{Binding Name}" Style="{StaticResource TextBlockNormalStyle}" />
                    </StackPanel>
                </Intersoft:UXCallOut.Header>
                <Grid Height="Auto" Width="Auto">
                    <Local:AggregatWechselnForm/>
                </Grid>
            </Intersoft:UXCallOut>
        </Local:HierarchicalDataTemplate>
    </Local:HierarchyTemplateSelector.AnlagenbaumItemTemplate>
</Local:HierarchyTemplateSelector>

I tried to change the UXCallOut MouseClickAction property to "Show Popup", but this value did not produce the desired behavior.

I also would like to set a fixed position for the UXCallOut, so that only changes the pointer position.

As in this example here: http://live.clientui.com/#/Controls/CallOut/TargetElement

Cheers

Mike

Using UXCallOut to edit TreeItems

yudi — Fri, 05 Apr 2013 06:53:46 GMT

I created a simple sample based on your given information about your scenario. in my sample, the page shows a UXTreeView on the left and CallOut next right to the UXTreeView control. The content of CallOut is changed based on the SelectedItem of UXTreeView.

Please have the attached sample evaluated on your end and let me know whether it helps or not.

Using UXCallOut to edit TreeItems

MikeTurrento — Thu, 04 Apr 2013 11:59:02 GMT

Hy ClientUI team,

Im trying to use the UXCallOut Control to edit tree items.

My szenario:

On the left side I have a tree (plant tree), on the right side I have my desktop. (see picture_1)

In the normal use case i dont want that the UXCallOut pop up. But when i switch in Plant Tree Edit Mode - i activate this mode with an icon on bottom of the tree - the desktop is disabled and the width of the plant tree is larger. (see picture_2)

in this mode i want to select an tree item - not mouseover - and on the right side a UXCallOut should PopUp with the formular to edit this item. I have different item types, so it is necessary to load different forms to edit the item. it depends on the tree item. (see picture_3)

is such a behaviour possible.