formatting issues

JayKappy · ‎01-18-2011

I have some code below that is placing a textblock on the right center of my map. When clicked it expands to give the user choices of layers to turn on and off....The code is working fine...Although... I am loking to do a couple things to it and am having a hard time figuing them out.

With the code as is when the user sees the map they see this wide textblock on the screen. I am trying to figure out how to show the textblock really narrow, THEN when clicked expand width and height....
1. I can set the width in the first stack panel but that effects the width of the entire grid.
Having the stackpanel sest to width of 30 I thought I might be able to set teh width of the
storyboard as well....again nothing doing
2. I then tried to change the width of the Grid relating to the textblock but nothign doing.

Ideally what I would like is a little arrow looking image on the edge of the screen...when clicked expand width and height....

Any help or thoughts woudl be greatly appreciated....

Thanks

            <Storyboard x:Name="HideSpatialQuery1" >
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0" Storyboard.TargetName="SpatialQueryScaleTransform1" Storyboard.TargetProperty="ScaleX" To="0" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0" Storyboard.TargetName="SpatialQueryScaleTransform1" Storyboard.TargetProperty="ScaleY" To="0" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetName="SpatialQueryGrid1" Storyboard.TargetProperty="Height" To="0" />
            </Storyboard>
            <Storyboard x:Name="ShowSpatialQuery1" >
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0" Storyboard.TargetName="SpatialQueryGrid1" Storyboard.TargetProperty="Height" To="400" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0" Storyboard.TargetName="SpatialQueryGrid1" Storyboard.TargetProperty="Width" To="200" />                
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetName="SpatialQueryScaleTransform1" Storyboard.TargetProperty="ScaleX" To="1" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetName="SpatialQueryScaleTransform1" Storyboard.TargetProperty="ScaleY" To="1" />
            </Storyboard>

            <Grid>
                <Border x:Name="SpatialQueryBorder1" Width="30" Background="{StaticResource PanelGradient}" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="#66FFFFFF" BorderThickness="1" CornerRadius="0,0,5,5" Effect="{StaticResource dropShadow}" Height="Auto" >
                    <StackPanel Orientation="Vertical"  VerticalAlignment="Center" >
                        <Grid x:Name="SpatialQueryHeaderGrid1" Cursor="Hand" Width="30"  MouseLeftButtonUp="SpatialQueryHeaderGrid1_MouseLeftButtonUp" ToolTipService.ToolTip="Toggle Spatial Query Tab" >
                            <Rectangle Fill="#00FFFFFF"  />
                            <TextBlock HorizontalAlignment="Left" Margin="5,3,5,3" Foreground="White" Text="{Binding Text, Mode=OneWay, ElementName=SpatialQueryTitle1}" VerticalAlignment="Center" FontSize="11" FontWeight="Bold" >
                                <TextBlock.Effect>
                                    <BlurEffect />
                                </TextBlock.Effect>
                            </TextBlock>
                            <TextBlock x:Name="SpatialQueryTitle1" HorizontalAlignment="Left" Width="30" Margin="0,0,0,0" Foreground="Black" Text="Layers" VerticalAlignment="Center" Effect="{StaticResource miniDropShadow}" />
                        </Grid>
                        <Grid x:Name="SpatialQueryGrid1" Height="0" VerticalAlignment="Center" HorizontalAlignment="Right" RenderTransformOrigin="0.5,0.5"  >
                            <Grid.RenderTransform>
                                <ScaleTransform x:Name="SpatialQueryScaleTransform1" ScaleX="0" ScaleY="0" />
                            </Grid.RenderTransform>
                            <Grid>
                                <Border Background="#996495ED" BorderThickness="1" CornerRadius="5" 
                                HorizontalAlignment="right"  VerticalAlignment="bottom" 
                                Margin="10,10,10,10" Padding="5" BorderBrush="red" >
 
                                 <!-- SOME LISTBOX CODE HERE -->

                                </Border>
                            </Grid>
                        </Grid>
                    </StackPanel>
                </Border>
            </Grid>

JMcNeil · ‎01-18-2011

What about in your xaml (not the storyboard) but the grid set it to auto...

Width="Auto"

If that does not work have you tired using the MaxWidth="" in your xaml (storyboard or Grid) maybe that will help define it but not restrict it.

J

JenniferNery · ‎01-18-2011

I don't think you need to change the Width or apply ScaleTransform to your Grid. But you might need to have ColumnDefintions where the last column's Width is "*" to be able to expand horizontally.

Look at how the IdentifyGrid in this sample is defined in the XAMLhttp://help.arcgis.com/en/webapi/silverlight/samples/start.htm#Identify. This Grid contains two child elements: TextBlock and another Grid (IdentifyResultsPanel). When the child grid (IdentifyResultsPanel) is changed from collapsed to visible, the parent grid (IdentifyGrid) expands vertically. This is possible because the child grid is contained in the 2nd row where Height="*".

You can read more about Grid here http://msdn.microsoft.com/en-us/library/system.windows.controls.grid(v=vs.95).aspx

JayKappy · ‎01-19-2011

I looked at the examples you placed on there J but dont think that is addressing my issue. I can get this to work just as the example, BUT (as in the example you shown, and in mine) the Original textblock is like 200-250 in width....I am looking to have the original textblock about 20-30 and then expand vertically and horizontally.I tried to define the width with the Column Definition at 50 but its still like 250 wide...I changed to Column instead of Row because I was trying to configure the width not height...
AND/OR replace the textblok with a small image of an arrow or soemthing...when clicked it expands vertically and horizontally....

So with this I get a textblock with a border about 250 in width, on hover it expands vertically and shows the listbox.....
I am lokoing on how to make the original textblock only 30 wide and then expand Vert and Hor

                <Border x:Name="LayerListBorder" Background="{StaticResource PanelGradient}" HorizontalAlignment="Right" VerticalAlignment="Center" 
                        BorderBrush="#66FFFFFF" BorderThickness="1" CornerRadius="0,0,5,5" Effect="{StaticResource dropShadow}"
                        MouseEnter="LayerList_MouseEnter" MouseLeave="LayerList_MouseLeave">
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Center"  >
                            <Grid x:Name="LayerListHeaderGrid" Cursor="Hand" ToolTipService.ToolTip="Layer List"  >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50" />
                                </Grid.ColumnDefinitions>                                
                                    <Rectangle Height="10" Fill="#00FFFFFF"  />
                                    <TextBlock HorizontalAlignment="Right" Margin="5,3,5,3" 
                                            Foreground="White" Text="{Binding Text, Mode=OneWay, 
                                            ElementName=LayerListTitle}" VerticalAlignment="Center" FontSize="11" FontWeight="Bold" >
                                    <TextBlock.Effect>
                                        <BlurEffect />
                                    </TextBlock.Effect>
                                    </TextBlock>
                                    <TextBlock x:Name="LayerListTitle" HorizontalAlignment="Center" Margin="0,0,0,0" Foreground="Black" Text="Layers" VerticalAlignment="Center" Effect="{StaticResource miniDropShadow}" />
                            </Grid>
                            <Grid x:Name="LayerListGrid" Height="0" Width="Auto" VerticalAlignment="Center" HorizontalAlignment="Right" RenderTransformOrigin="0.5,0.5"  >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>                                
                                <Grid.RenderTransform>
                                    <ScaleTransform x:Name="LayerListTransform" ScaleX="0" ScaleY="0" />
                                </Grid.RenderTransform>
                                <Grid>
                                    <Border Background="#996495ED" BorderThickness="1" CornerRadius="5" 
                                        HorizontalAlignment="right"  VerticalAlignment="bottom" 
                                        Margin="10,10,10,10" Padding="5" BorderBrush="red" >
                                        <ListBox x:Name="MyList" Height="Auto" ItemsSource="{Binding ElementName=MyMap, Path=Layers}">
                                        </ListBox>
                                    </Border>
                                </Grid>
                            </Grid>
                        </StackPanel>
                </Border>

JenniferNery · ‎01-19-2011

This is to give you an idea of how you can modify your code. You will need to look up Grid, StackPanel, Auto and "*" Star Sizing, and Visibility.

In this sample, the stack panel contains two elements a grid that grows horizontally and a rectangle of fixed size. The grid that grows horizontally defines two columns with 2nd column width="*" (which means the column will adjust to its content size). While the textbox is collapsed it will not occupy any space but when it becomes visible, the column will adjust to its contents. In this sample, I used the button click to change the visibility of my textbox.

<StackPanel Orientation="Horizontal" >
 <Grid x:Name="MyGrid" VerticalAlignment="Top" >
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="Auto"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Button Content="Button" Click="Button_Click" />
  <TextBox x:Name="MyTextBox" Text="This expands on button click" Grid.Column="1" Visibility="Collapsed"/>  
 </Grid>
 <Rectangle Fill="Blue" Width="50" Height="50" VerticalAlignment="Top"/>
</StackPanel>

 
private void Button_Click(object sender, RoutedEventArgs e)
{
 if (this.MyTextBox.Visibility == System.Windows.Visibility.Collapsed)
  this.MyTextBox.Visibility = System.Windows.Visibility.Visible;
 else
  this.MyTextBox.Visibility = System.Windows.Visibility.Collapsed;
}

JayKappy · ‎01-19-2011

Seems so darn simple when you put it that way....I dont know why I was messing around with Animations and StoryBoards....although I like the way it opens with the Story board...

Its not just there....it appears...that make sense...

Its working but still trying to get it to appear through a story board...over a second or so

Either way thanks for getting it working....if anyone cares to glance at this additionally (no worries)...I am trying to open the MyListGrid (which houses the layer list) in this story board...

XAML

            <Storyboard x:Name="ShowLayerListFinal" >
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0" Storyboard.TargetName="MyList3" Storyboard.TargetProperty="Height" To="400" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0" Storyboard.TargetName="MyList3" Storyboard.TargetProperty="Width" To="400" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetName="LayerListTransformFinal" Storyboard.TargetProperty="ScaleX" To="1" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetName="LayerListTransformFinal" Storyboard.TargetProperty="ScaleY" To="1" />
            </Storyboard>

XAML

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                <Grid x:Name="MyGrid" VerticalAlignment="Top" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Button Content="Layers>" Height="30" MouseEnter="ButtonShowLayerList" Margin="0,3,0,0" Foreground="Black" Effect="{StaticResource miniDropShadow}"/>                                                          
                    <Border x:Name="MyList3" Background="#996495ED" BorderThickness="1" CornerRadius="5" Grid.Column="1" Visibility="Collapsed" 
                            HorizontalAlignment="right"  VerticalAlignment="bottom" Margin="10,23,10,10" Padding="5" BorderBrush="red" >
                                <ListBox x:Name="MyList2" Height="Auto" ItemsSource="{Binding ElementName=MyMap, Path=Layers}" MouseLeave="ButtonHideLayerList">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <CheckBox IsChecked="{Binding Visible, Mode=TwoWay}" />
                                                <Slider Margin="-5,0,0,0" Minimum="0" Maximum="1" Width="30" 
                                                            Value="{Binding Opacity, Mode=TwoWay}" Height="18" />
                                                <TextBlock Text="{Binding ID, Mode=OneWay}" Margin="5,0,0,0" > 
                                                             <ToolTipService.ToolTip>
                                                                    <StackPanel MaxWidth="400">
                                                                        <TextBlock FontWeight="Bold" Text="HUH" TextWrapping="Wrap" />
                                                                        <TextBlock Text="WOW" TextWrapping="Wrap" />
                                                                    </StackPanel>
                                                                </ToolTipService.ToolTip>
                                                            </TextBlock>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                    </Border>
               </Grid>
                <!--<Rectangle Fill="Blue" Width="50" Height="50" VerticalAlignment="Top"/>-->
            </StackPanel>

VB

Private Sub ButtonShowLayerList(ByVal sender As Object, ByVal e As MouseEventArgs)
          ShowLayerListFinal.Begin()    
End Sub

JenniferNery · ‎01-19-2011

If you would like to change an element's visiblity through StoryBoard, you can look at this: http://msdn.microsoft.com/en-us/library/system.windows.uielement.visibility(v=vs.95).aspx
where TargetName is the name of your collapsed Border.

dotMorten_esri · ‎01-20-2011

For these generic Silverlight questions, you might have much more luck at the silverlight forums: http://forums.silverlight.net