Custom Toolbar

AliKaraman1 · ‎02-05-2014

Hi all,
I would like to change the look and feel of the MainToolBar in the Viewer.
For instance, I would like to use my custom toolbar control.
Or replace it with the componentOne Toolbar silverlight control.

To which extend is a change possible? Extending, replacing etc?

Many many thanks!

RobertBorchert · ‎02-05-2014

You are best off creating a custom toolbar on your own and turning off whatever tool bars you don't want.

I create a custom toolbar I call Floating. I always have it in the data view and it contains the tools I used the most. My current one has 17 tools in it.

Create the custom toolbar in a blank session and save it to the normal.

Hi all,
I would like to change the look and feel of the MainToolBar in the Viewer.
For instance, I would like to use my custom toolbar control.
Or replace it with the componentOne Toolbar silverlight control.

To which extend is a change possible? Extending, replacing etc?

Many many thanks!

brettangel · ‎02-05-2014

You can edit the xaml in the layout and move/change the MainToolBar within the default layout. I added the following 2 toolbars.

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1" >
                <ContentControl x:Name="MainToolbarContainer" Margin="0,0,0,0"/>
            </StackPanel>

                <StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,40,5,5">
                    <ContentControl x:Name="NavigationToolbarContainer" Margin="0,0,0,0"/>
                </StackPanel>

and they look like this.

[ATTACH=CONFIG]31149[/ATTACH]

For me this was the simplest solution and without a having to develop a custom toolbar.

AliKaraman1 · ‎02-09-2014

You can edit the xaml in the layout and move/change the MainToolBar within the default layout. I added the following 2 toolbars.

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1" >
                <ContentControl x:Name="MainToolbarContainer" Margin="0,0,0,0"/>
            </StackPanel>

                <StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,40,5,5">
                    <ContentControl x:Name="NavigationToolbarContainer" Margin="0,0,0,0"/>
                </StackPanel>

and they look like this.

[ATTACH=CONFIG]31149[/ATTACH]

For me this was the simplest solution and without a having to develop a custom toolbar.

Hi Bret,

thanks for your hint.
Please could you elaborate how you used it in the viewer.

In the Tools.xml there is a "MainToolbarContainer" tag, which I don't have to modify at all, I guess.

Then there is also the Glass.xaml file, (one of the themes) you also mentioned.

How should I proceed, if I don't want to move or change, BUT I want to replace it? In your screenshot, I can see the Toolbar from the "Glass" design. There I want my custom Toolbar.
Unfortunately, I was even not able to remove it from the application. 😞

I tried something like
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1" >
                <ContentControl x:Name="MyCustomToolbar" Margin="0,0,0,0"/>
            </StackPanel>

Do you think, it will be still possible to add tools to the Toolbar from Tools.xml file (or builder app), if I don't use the default Toolbar from Viewer?

Thanks very much!

brettangel · ‎02-10-2014

Create your toolbar in Glass.xml

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1"  >
                <ContentControl x:Name="MyCustomToolbar" Margin="0,0,0,0"/>
            </StackPanel>

Then add it to the Tools.xml

  <ToolPanel Name="My Custom Toolbar" ContainerName="MyCustomToolbar" Orientation="Horizontal">
    <Tools>

    </Tools>
  </ToolPanel>

As long as your toolbars are listed in the Tools.xml file you will be able to modify the contents with the viewer. All you're doing is creating another stack panel the viewer will use to add/remove content.

You can modify the icon styles in the Shared_Resources.xml file, i.e. my icons are height of 25.

AliKaraman1 · ‎02-13-2014

Create your toolbar in Glass.xml
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1"  >
                <ContentControl x:Name="MyCustomToolbar" Margin="0,0,0,0"/>
            </StackPanel>
Then add it to the Tools.xml
  <ToolPanel Name="My Custom Toolbar" ContainerName="MyCustomToolbar" Orientation="Horizontal">
    <Tools>

    </Tools>
  </ToolPanel>
As long as your toolbars are listed in the Tools.xml file you will be able to modify the contents with the viewer. All you're doing is creating another stack panel the viewer will use to add/remove content.

You can modify the icon styles in the Shared_Resources.xml file, i.e. my icons are height of 25.

Thank you!
Works like charm!

AliKaraman1 · ‎04-06-2014

(Thread looks long, but it's not)
Hi all!
Hope you are doing well...

I came accross another problem, for which I need your confirmation, hints etc.

I want to customize the whole layout, (like having the viewer's map object in a componentone dock-control's tab) but this doesn't work.
Documentation says, viewer is open ended and can handle any kind of silverlight library, that's why I think I am doing something wrong..

What I did:

1.)
I changed in rnd.Layouts.csproj file (Project Template for the Layout)

<XapOutputs>false<XapOutputs>

to

<XapOutputs>true<XapOutputs>

to get the xap generated.

2.)
I Added

<Extension Url="Extensions/rnd.Layouts.xap" />

to Application.xml in the web project, so that this add-in is loaded by the viewer.

3.) I Changed

LayoutFilePath="Config/Layouts/Glass.xaml"

to

LayoutFilePath="Config/Layouts/rnd.xaml"

in the file 'Application.xml' available in web project, so that my custom xaml is loaded by the viewer.

The replacement of Glass.xaml (the LayoutFile) looks like:

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    
    xmlns:rnd="clr-namespace:rnd.Layouts;assembly=rnd.Layouts"    
    >

    <Grid x:Name="LayoutRoot">       
        <rnd:customLayout/>
    </Grid>
</UserControl>

rnd.xaml file is created under Layouts folder in web project and loads the rest of my view from the assembly "rnd.Layouts"

I might have forgotten a step or some, but the customLayout control which is in the rnd.Layouts project (called by rnd.xaml the LayoutFile) is loaded without any issue if some conditions are true, which no where are documented.

My conclusion was:
The object

MapApplication.Current.Map

is not initialized when the map object like

<esri:Map x:Name="Map"/>

is not added in the LayoutFile which Application.xml is pointing to (in Glass.xaml or rnd.xaml)

For the map, the x:Name must be exactly like "Map" not "rndMap" or so, otherwise

MapApplication.Current.Map

is not initialized.

The customLayout UserControl contains the resource dictionary

 <extensibility:MapApplicationBindingSource x:Key="MapApplication" />

and all needed references etc.

I read that the viewer is expecting some elements like

<esri:Map x:Name="Map"/>

but there is nothing listed in the documentation.

-What other elements are compulsory for the viewer what are their x:Name's?
-Which Resourceses are compulsory by the viewer elements?
-I would like to have different Views/UserControls in my Layout project, where I can nest the viewer elements into other custom Views/UserControls.
-If there is no other option than initializing the viewer elements in the LayoutFile, how can I reuse them in another CustomControl/UserControl?

Any help is highly appreciated...
Many thanks for reading...