setting tab stops to controls in a esri tool bar

[joshuvaThalari]

Hi,

I have a toolbar which have some images as items in the tool bar and i want to set tab stops to each item in the tool bar..can any one please help me with this

I tried setting istabstop property to true for the toolbar but when i tab it's not actually coming to the items in the toolbar...any help appreciated thanks

[JenniferNery]

I believe this is only possible if you can set IsTabStop and TabIndex properties. These are properties of Control http://msdn.microsoft.com/en-us/library/system.windows.controls.control.tabindex(v=vs.95).aspx. Therefore Button and TextBox can have these properties while Image does not.

[joshuvaThalari]

I am supposed to make our application WCAG 2.O compliant and one of the feature of WCAG 2.0 states that the application functions ( controls ) should be accessible by keyboard. How can i achieve this by using esri toolbar ??

The esri toobar sample uses images as tool bar items and because the image does'nt have a tab stop property how can i achieve this ??

[JenniferNery]

Toolbar item is not limited to an image content, you can replace this with button or a button that has image content.

[joshuvaThalari]

I tried replacing image with button control but when i click the button, it's not actually triggering the toolbaritem click event ...any thoughts

I have a toolbar item click event in the code which is not responding when i replace the image control with button control as a tool bar item which is actually causing me the problem...any help appreciated

[JenniferNery]

ToolbarItemClicked event is raised on MouseLeftButtonDown. A Button raises Click event instead. You can download the toolkit from CodePlex and customize Toolbar to change this behavior.http://esrisilverlight.codeplex.com/.

[JannalynPontello]

I have a completely different issue, but I think my solution is editing the default toolbar behavior. I downloaded the toolkit, but I don't know where to put the files in my application so that they override the defaults.

Basically, I want the toolbar click events to act the same as button events, meaning I want them to have the back glow effect rather than the bounce effect. I thought of adding buttons and not using the toolbar, but I'm having trouble getting the buttons to work (panning, zooming, etc.).

Thanks,
Jannalyn

[JenniferNery]

You need to edit Toolbar.cs

OnApplyTemplate() where we subscribe to the mouse events, you can check if it is a ButtonBase and if it is, wire up to its Click event and raise the ToolbarItemClicked event (see MouseLeftButtonDown event handler). After you build the updated toolkit, you can point your project reference to this assembly instead or overwrite the original SDK files. Either way, your project needs to point to this updated assembly 🙂

[JannalynPontello]

Thanks for your quick response. I'm just getting back to this. I think I see where to add the back glow effect to the toolbar.cs file, but I don't know where to put the file in my app so that it will override the default. Do I just create a folder called Toolbar and put it there like it is in the toolkit?

Thanks,
Jannalyn

[JannalynPontello]

Okay. Change the file, build, point to new assembly. I can only blame my initial confusion on the fact that it's Friday.

My only problem now is getting the code correct to make the new affect. I plan to recreate the storyboard animation I have in xaml in my cs page. Anyone know how to do this? Here's my xaml.

<ControlTemplate x:Key="WhiteBackGlowButton" TargetType="Button">
        <Grid Cursor="Hand" Background="Transparent" Margin="2,0,2,0" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <ScaleTransform x:Name="handScale" />
            </Grid.RenderTransform>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <Storyboard>
<DoubleAnimation To="0" FillBehavior="HoldEnd" Storyboard.TargetName="brushLight"
     Storyboard.TargetProperty="Opacity" Duration="0:0:0.4" />
<DoubleAnimation To="1" Storyboard.TargetName="handScale" BeginTime="0:0:0" Storyboard.TargetProperty="ScaleX" Duration="0:0:0.1" />
<DoubleAnimation To="1" Storyboard.TargetName="handScale" BeginTime="0:0:0" Storyboard.TargetProperty="ScaleY" Duration="0:0:0.1" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
<DoubleAnimation To="0.75" FillBehavior="HoldEnd" Storyboard.TargetName="brushLight"
Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" />
<DoubleAnimation To="1.5" Storyboard.TargetName="handScale" BeginTime="0:0:0" Storyboard.TargetProperty="ScaleX" Duration="0:0:0.1" />
<DoubleAnimation To="1.5" Storyboard.TargetName="handScale" BeginTime="0:0:0" Storyboard.TargetProperty="ScaleY" Duration="0:0:0.1" />
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <!-- The background white glow effect -->
            <Canvas Width="60" Height="30" Margin="-20,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
                <Rectangle x:Name="backGlow" RenderTransformOrigin="0.5,1" IsHitTestVisible="False"
   Width="60" Height="30" Canvas.Left="0" Canvas.Top="0">
                    <Rectangle.Fill>
                        <RadialGradientBrush x:Name="brushLight" Center="0.5, 0.75" RadiusY="0.65">
                            <GradientStop Offset="0" Color="#FFFFFFFF" />
                            <GradientStop Offset="0.98" Color="#00FFFFFF" />
                        </RadialGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </Canvas>
            <!-- Content of the menu/tool -->
<ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
        </Grid>
    </ControlTemplate>