Time Slider Button Icons Squished (WPF)

[RyanCoodey]

Please see attached screen shot...  see how the circled images are not correct...

Is this a WPF bug?  I know WPF does wierd things sometimes with graphics.  Any ideas on what might be happening and maybe a fix?

Thanks a lot!

[JenniferNery]

I cannot replicate this with the DefaultStyle of the TimeSlider. Did you by any chance applied a custom style? Can you also share your XAML-code on how you define the TimeSlider?

[RyanCoodey]

I cannot replicate this with the DefaultStyle of the TimeSlider. Did you by any chance applied a custom style? Can you also share your XAML-code on how you define the TimeSlider?

No custom style, just the default.   I define it like this:

<esri:TimeSlider x:Name="TimeSlider" Grid.Column="1" Height="20" Width="400" ValueChanged="TimeSlider_ValueChanged" />

Here is the whole control it is within (I have tried taking it out of this control though and putting it right in the main application grid, and still have the issue):

<local:DialogWindow x:Class="SDL.ArcGIS.Client.Toolkit.TimeSliderWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
    xmlns:local="clr-namespace:SDL.ArcGIS.Client.Toolkit"
    Resizable="False">

    <StackPanel Orientation="Vertical" Margin="10">
        <Grid Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid x:Name="MapsGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Set Time On:" VerticalAlignment="Center" Foreground="Black" />
                <ComboBox x:Name="MapsComboBox" Grid.Column="1" Text="Maps" ItemsSource="{Binding Maps}" Margin="10,0,0,0" />
            </Grid>
            <Grid x:Name="TimeSliderGrid" Grid.Row="1" Margin="0,10,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="Time: " VerticalAlignment="Center" Foreground="Black" />
                <esri:TimeSlider x:Name="TimeSlider" Grid.Column="1" Height="20" Width="400" ValueChanged="TimeSlider_ValueChanged" />
                <TextBlock Grid.ColumnSpan="2" Grid.Row="1" x:Name="CurrentTimeTextBlock" Foreground="Black" HorizontalAlignment="Center" />
            </Grid>
        </Grid>
    </StackPanel>

</local:DialogWindow>

Another thing that is really odd, if I don't specify the height and width, it drags my application to a hault almost... like its in an endless loop of processing something.  I don't see the relation between that behavior and the size of the control though.

Thanks for the quick reply Jennifer!

[JenniferNery]

I still cannot reproduce this with your code, even when I make the size of my window small enough so that some part of the TimeSlider is about to get cut off.

I'm not sure if adding extra margin caused this because StackPanel and Grid have margin of 10. But I tried your code and did not see any problem with how it looks like on WPF4. However I don't know what size your DraggableWindow is or if it also has additional margins, padding or if it calculates its size at run-time when other elements get loaded.

At any case, this should not be happening because if you look at the default template for the TimeSlider in Expression Blend, the 3 buttons (play, previous and next) get "Auto" size on the Grid. And the tick bar section takes whatever is left over after these 3 buttons have already taken the their place in the Grid. I also tried removing the height/width of the TimeSlider and what I see are just the 3 buttons the application still run fine.

[RyanCoodey]

Thanks a lot for checking into it Jennifer!  I am using WPF4 also... I'll poke around with it some more and see if I can figure anything out.  Oh, I just thought of something else it could be, it is a WPF XBAP, not a standalone application... maybe the difference lies there, I know I had that same quirk with something else before.

[JenniferNery]

Oh! That's something I did not try. I remember there also was another issue in XBAP, something about Popup getting black background even with AllowsTransparency is true.

You can change the template of the TimeSlider though.  You can test it out in ExpressionBlend until you find a style that can also work in XBAP.

Good luck.

[RyanCoodey]

FYI, to fix this all I did was remove Padding="3,0" from both the PreviousButton and NextButton in the style.

[ChristopherHill]

Hello,

I was wondering what web browser you were veiwing your WPF Broswer Application in? If IE what version? The padding does not cause me any trouble in Silverlight, WPF windows application,  WPF broswer application.

[RyanCoodey]

Hi Chris, we are using IE7 with the XBAP applications... I will try our apps out with the 2.2 beta in the next few days (and remove the custom style) to see if it is ok.

Thanks!

[RyanCoodey]

FYI, the buttons are still squished with the 2.2 beta in IE7 with the XBAPs 😞