nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

how to avoid the floating effect of navigation tool?

DanDong

Hi all,

I notice that the navigation tool has a floating effect, that is when you move the mouse on it, it will get bigger and the color gets darker (opaque), but once you move the mouse away, it will become smaller and transparent. Any suggestion to solve that? I want to make the navigation's color opaque, dont want it change to transparent. Should I do it in expression? Thank you 🙂

Najděte více příspěvků označených jako

Accepted answers

All comments

DanDong

This is the infinity.
The slider is not designed to make interpolation until infinity.

Please try with a lower value.
It's difficult to give you a value which makes sense because it's depending on your map units (it's why I don't like these resolution properties but I am very 'old school' )
I guess the best is you to experiment with different values.

Thank you Dominique! I change it to this MaximumResolution="1.7976931348623157E+5" . Right now the slidebar is working 😉

DominiqueBroux

I added this "MaximumResolution="1.7976931348623157E+308"

This is the infinity.
The slider is not designed to make interpolation until infinity.

Please try with a lower value.
It's difficult to give you a value which makes sense because it's depending on your map units (it's why I don't like these resolution properties but I am very 'old school'

)
I guess the best is you to experiment with different values.

DanDong

Oh I see, if you do not have a Tiled layer, the MinimumResolution and MaximumResolution of the map is not set. Therefore the Navigation control will not know how to set the ZoomSlider's Minimum and Maximum value.

What you can do is set these properties on the map to a value that may be meaningful to you.

For example:
 <esri:Map x:Name="MyMap"   MinimumResolution="0.0000107288360595703" MaximumResolution="0.3515625">

Thanks Jennifer! I added this "MaximumResolution="1.7976931348623157E+308" MinimumResolution="0.001" " in MyMap, right now, when run the project, the slidebar can have a full length, but it seems it doesn't work. When I drag up or down the little thing in the slidebar, the map can't be zoomed in or out. Do we have something missing in the code?

JenniferNery

Oh I see, if you do not have a Tiled layer, the MinimumResolution and MaximumResolution of the map is not set. Therefore the Navigation control will not know how to set the ZoomSlider's Minimum and Maximum value.

What you can do is set these properties on the map to a value that may be meaningful to you.

For example:

 <esri:Map x:Name="MyMap"   MinimumResolution="0.0000107288360595703" MaximumResolution="0.3515625">

DanDong

This is expected when the map's resolution has not been set.

Once you add a layer to your map that will define it's resolution (Minimum, Maximum and current), you should be able to see the ZoomSlider.

I have added layers to the map. So I think the resolution has been set. But still, when I run the project, I still get the shorter slidebar.

<esri:Map x:Name="MyMap" ExtentChanged="MyMap_ExtentChanged" Background="LightGray" Grid.Column="1" Grid.Row="2"  IsLogoVisible="False">            
<esri:ArcGISDynamicMapServiceLayer ID="ecocat_images"
Url="http://rmms-dev.atlas.illinois.edu/ArcGIS/rest/services/ecocat_images/MapServer"
Initialized="ArcGISDynamicMapServiceLayer1_Initialized"/>
<esri:ArcGISDynamicMapServiceLayer ID="ecocats"
Url="http://rmms-dev.atlas.illinois.edu/ArcGIS/rest/services/ecocats/MapServer"
Initialized="ArcGISDynamicMapServiceLayer_Initialized"/>
<esri:GraphicsLayer ID="MeasureGraphicsLayer"/>
<esri:GraphicsLayer x:Name="MyLayer" ID="MyGraphicsLayer"/>
</esri:Map>

JenniferNery

This is expected when the map's resolution has not been set.

Once you add a layer to your map that will define it's resolution (Minimum, Maximum and current), you should be able to see the ZoomSlider.

DanDong

ok, I got it. Thank you 🙂

By changing the 0.25 to 0.75, then I can get the same opacity when "Normal" and "MouseOver"

<DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>

The other question is about the Zoomcontainer, I attach two pictures of this problem. The first one is under the expression, the container is in its right shape, a rectangle. The second one is when run the project, the container becomes shorter...I don't know why this happen.

after.png

ori.jpg

JenniferNery

They are similar but the To property of the DoubleAnimation is different, for Normal state it is to "0.25", for MouseOver state it is to "0.75" You can either remove this animation so Opacity will stay at 1, or update the animation to a number that is less opaque.

DanDong

You can change the Navigation control template. Kindly see this blog: http://blogs.esri.com/Dev/blogs/silverlightwpf/archive/2010/05/20/Use-control-templates-to-customize-the-look-and-feel-of-ArcGIS-controls.aspx

You can see in the default template's VisualStateManager include "Normal" and "MouseOver" states which changes the Opacity of the whole Grid.

Thanks Jennifer! But I notice that in both Normal and Mouseover, the opacities used are the same (Storyboard.TargetProperty="(UIElement.Opacity)")

<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="LayoutRoot"/>
<DoubleAnimation Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="LayoutRoot"/>
<DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
</Storyboard>
</VisualState>

<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="LayoutRoot"/>
<DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="LayoutRoot"/>
<DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
</Storyboard>
</VisualState>

JenniferNery

You can change the Navigation control template. Kindly see this blog: http://blogs.esri.com/Dev/blogs/silverlightwpf/archive/2010/05/20/Use-control-templates-to-customize-the-look-and-feel-of-ArcGIS-controls.aspx

You can see in the default template's VisualStateManager include "Normal" and "MouseOver" states which changes the Opacity of the whole Grid.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.