topic Re: setting tab stops to controls in a esri tool bar in ArcGIS API for Silverlight Questions

setting tab stops to controls in a esri tool bar

joshuvaThalari — Tue, 22 Feb 2011 23:39:35 GMT

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

Re: setting tab stops to controls in a esri tool bar

JenniferNery — Wed, 23 Feb 2011 00:36:34 GMT

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.

Re: setting tab stops to controls in a esri tool bar

joshuvaThalari — Thu, 24 Feb 2011 23:40:13 GMT

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 ??

Re: setting tab stops to controls in a esri tool bar

JenniferNery — Fri, 25 Feb 2011 06:22:38 GMT

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

Re: setting tab stops to controls in a esri tool bar

joshuvaThalari — Mon, 28 Feb 2011 21:09:48 GMT

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

Re: setting tab stops to controls in a esri tool bar

JenniferNery — Mon, 28 Feb 2011 23:10:48 GMT

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/.

Re: setting tab stops to controls in a esri tool bar

JannalynPontello — Mon, 18 Apr 2011 18:45:18 GMT

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

Re: setting tab stops to controls in a esri tool bar

JenniferNery — Mon, 18 Apr 2011 22:59:20 GMT

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 🙂

Re: setting tab stops to controls in a esri tool bar

JannalynPontello — Fri, 22 Apr 2011 14:45:01 GMT

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

Re: setting tab stops to controls in a esri tool bar

JannalynPontello — Fri, 22 Apr 2011 17:35:00 GMT

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>
            
            <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>
            
<ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
        </Grid>
    </ControlTemplate>