Scrollviewer and ItemsControl VerticalScrolling into nirvana - silverlight

Hi i've got a complex ItemsControl wich is used to display news (variable height!) with a slide/fade in effect. (like google currents) my problem now is that the scrollviewer will calculate the available scrollingsize left based on whatever.. that will end up in a very ugly way of scrolling if the user scrolls fast! sometimes the scrollview scrolls into the nirvana. i thought this might be the cause of virtualization but i'm not able to deactivate it. as you can see i ve already replaced the ItemsPanel.
<ScrollViewer
ManipulationMode="Control">
<ItemsControl
Name="TickerItemList"
ItemsSource="{Binding TickerItems, Source={StaticResource TickerViewModel}}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Right">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
<!--<VirtualizingStackPanel CleanUpVirtualizedItemEvent="CleanUpVirtualizedItem" VirtualizingStackPanel.VirtualizationMode="Recycling" />-->
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Image Grid.Row="0"
Source="{Binding TitleImage, Source={StaticResource TickerViewModel}}"
Name="TitleImage"
Height="240"
Stretch="UniformToFill"
Loaded="TitleImageLoaded"
CacheMode="BitmapCache"/>
<Grid Grid.Row="1">
<Border Height="15" Margin="0,-15,0,0" VerticalAlignment="Top" >
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00000000" Offset="0"/>
<GradientStop Color="#44000000" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<ItemsPresenter />
</Grid>
</Grid>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid RenderTransformOrigin="0.5,0.5" Tap="ItemTapped" Background="{StaticResource TickerPageBackgroundBrush}">
<!-- RenderTransform definition for animating each item -->
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform />
<TranslateTransform />
<RotateTransform />
</TransformGroup>
</Grid.RenderTransform>
<!-- Selector for ticker type -->
<local:NinePatch Margin="10,10,10,0" Image="{StaticResource TickerPaperImage}" CacheMode="BitmapCache">
<local:TickerListItemLayoutSelector Content="{Binding}">
too many lines... ;)
</local:TickerListItemLayoutSelector>
</local:NinePatch>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>

Related

How to full Screen popup in windows phone 8?

Hi;
i can not fit RadModalWindow on windows phone 8 application. How to fill all screen my popup?
<telerikPrimitives:RadModalWindow Name="cardselect" IsFullScreen="True"
HorizontalAlignment="Center" VerticalAlignment="Center"
PlacementTarget="{Binding ElementName=ContentPanel}"
IsClosedOnOutsideTap="True">
<Grid Name="ModalWindowGrid1"
Width="{Binding ProgramtDetailWidth, Mode=TwoWay}"
Height="{Binding ProgramtDetailHeight, Mode=TwoWay}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.Background>
<ImageBrush ImageSource="Assets/Background.png"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border BorderBrush="#FF0A0611" BorderThickness="0" Grid.Row="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF45374D"/>
<GradientStop Color="#FF1E092A" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderThickness="3" HorizontalAlignment="Left" Width="330" Height="392" VerticalAlignment="Top">
<Border.BorderBrush>
<SolidColorBrush Color="#FFF2F1F3"/>
</Border.BorderBrush>
<StackPanel HorizontalAlignment="Center" Width="330" Margin="-3,0" >
<StackPanel x:Name="MainPanel" Height="385">
<Border BorderThickness="0,0,0,3" Height="70" VerticalAlignment="Top" Margin="0,0,1,0">
<Border.BorderBrush>
<SolidColorBrush Color="#FFF2F1F3"/>
</Border.BorderBrush>
<TextBlock HorizontalAlignment="Center" Margin="0,22,0,15" TextWrapping="Wrap" VerticalAlignment="Center" FontSize="21.333" Height="32" Width="209" Grid.RowSpan="2" Text="Dijital Kart No Seçiniz"/>
</Border>
<StackPanel x:Name="WaitingPanel" Margin="0,60" HorizontalAlignment="Center" Visibility="Collapsed">
<TextBlock Text="Kayıt işlemi sürüyor." VerticalAlignment="Center" FontSize="21.333" HorizontalAlignment="Center"/>
<ProgressBar x:Name="pgb" Width="250" IsIndeterminate="True" Margin="0,10
,0,0" Value="0" />
</StackPanel>
<Grid x:Name="grdClient" HorizontalAlignment="Left" VerticalAlignment="Top" Height="313" Width="329">
<Grid.RowDefinitions>
<RowDefinition Height="255*"/>
<RowDefinition Height="58*"/>
</Grid.RowDefinitions>
<Button x:Name="btnOK" Content="OK" HorizontalAlignment="Right" Height="46" Margin="0,0,21,0" VerticalAlignment="Center" Width="119" Click="btnRecord_Click" Grid.Row="1"/>
<Button x:Name="btnCancel" Content="Vazgeç" HorizontalAlignment="Left" Height="46" Margin="21,0,0,0" VerticalAlignment="Center" Width="119" Click="btnCancel_Click_1" Grid.Row="1"/>
<ListBox Name="lstCards" SelectionMode="Single" HorizontalAlignment="Left" Height="210" Margin="21,21,0,0" VerticalAlignment="Top" Width="287" ItemsSource="{Binding}"></ListBox>
</Grid>
</StackPanel>
</StackPanel>
</Border>
</Border>
</Grid>
</telerikPrimitives:RadModalWindow>
It looks like your window's content is not big enough to fill the screen. The RadModalWindow does fill the whole screen, but any area not covered by your content will show what is behind it via transparency.
Make your main grid auto size to fill the screen. Alternately, setting a background colour or image on your window should ensure the transparency doesn't show the content behind the window.

listview itemtemplate with an image

I am trying to create a ListViewItem template which looks like this, but i'm not making much headway.
Here is the style I have created so far:
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Border HorizontalAlignment="Stretch" Margin="1.5" CornerRadius="5" BorderThickness="1,1,1,1" BorderBrush="#FF997137">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4B4B4B" Offset="0" />
<GradientStop Color="#FF8F8F8F" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<StackPanel Orientation="Horizontal" >
<Image HorizontalAlignment="Left" Width="32" Source="/Images/stop.png" Stretch="Fill" Height="32" />
<TextBlock Foreground="#FFECAD25" TextWrapping="Wrap" Width="150" >
This is a user control. The animation uses the attached BalloonShowing event.
</TextBlock>
<StackPanel Orientation="Vertical" >
<Image HorizontalAlignment="Right" Margin="0,10,5,0" VerticalAlignment="Top" Width="16" Height="16" Source="/Images/Close.png" Stretch="Fill"
Opacity="0.4" ToolTip="Delete" x:Name="Delete" />
<Image HorizontalAlignment="Right" Margin="0,5,5,0" VerticalAlignment="Top" Width="16" Height="16" Source="/Images/Close.png" Stretch="Fill"
Opacity="0.4" ToolTip="Edit" x:Name="Edit" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
Is it possible to extend the text below the image/icon?
I don't believe there is any out-of-the box way to do this with a `TextBlock'.
However, if you are able to use the FlowDocument control, here are some options: answer 1, answer 2.
As far I know, no. Not atleast with simple Image and TextBlock.
FlowDocument seems to be good solution though,
check out this link for further information:
http://dotnetslackers.com/articles/wpf/WPFFlowDocumentsAndImages.aspx

Silverlight ListBox Height Automatically increase

I am using silvelight listbox control,and i stucked.Every listbox item contains another listbox item now when i bind my data second listbox control,it appears horizontal scrollbar and this is not a problem i can remove it.How can do when I add new Item to second listbox,its height automatically increase?
For a second listbox Height=Auto dont work because its scrolling.
is that possible?
Thx.
Here is XAML code:
<DataTemplate x:Key="VesselListItem">
<Border Height="Auto" HorizontalAlignment="Left" Margin="0" Name="border1" VerticalAlignment="Top" Width="271" CornerRadius="7" BorderThickness="2">
<Grid Name="grid1" Width="Auto">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="6,1,0,0" Name="textBlock1" Text="BOSPOROTUES PIRATES" VerticalAlignment="Top" FontWeight="Normal" FontSize="14" Width="197" Foreground="#FFF9DD06" >
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" BlurRadius="2" Direction="338"/>
</TextBlock.Effect>
</TextBlock>
<Rectangle Canvas.ZIndex="-1" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="2" Width="Auto" RadiusX="7" RadiusY="7" Opacity="0.15" Fill="White" />
<c1ext:C1Expander Height="Auto" HorizontalAlignment="Left" Margin="6,22,5,10" Name="c1Expander1" VerticalAlignment="Top" Width="255" IsExpanded="True">
<Grid HorizontalAlignment="Stretch" Name="grid6" VerticalAlignment="Stretch" ShowGridLines="False" Height="50">
<ListBox Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="listBox1" VerticalAlignment="Stretch" Width="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBoxItem Content="sdfgdsfgdsfg" />
<ListBoxItem Content="sdfhsdfhdsfh" />
<ListBoxItem Content="sdfhsdfhsdfh" />
<ListBoxItem Content="sdfhsdfhsdfh" />
<ListBoxItem Content="sdfhdsfhsdfh" />
<ListBoxItem Content="sdfhdsfhd" />
<ListBoxItem Content="tttttttttt" />
</ListBox>
</Grid>
</c1ext:C1Expander>
</Grid>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#9FFFFFFF" Offset="0" />
<GradientStop Color="White" Offset="0.654" />
<GradientStop Color="#4A408B9D" Offset="0.423" />
<GradientStop Color="#BA002D76" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</DataTemplate>
Try setting the "MaxHeight" property of your ListBox. Then your ListBox height should adjust accordingly until the MaxHeight is achieved and then the scrollbar will appear.

Layout difficulties in ListBoxItem ContentPresenter Template

I am populating a ListBox withe Shipment objects and I am using an ItemContainerStyle to define how I want the items displayed. Everything is working smoothly with one exception.
The template uses a Grid that is inside of two borders. The grid has 7 columns, the last is specified to contain a border that will end up being a glowing gem to denote the active (not necessarily the selected package). The template is set to expand to the width of the listbox. And I cannot figure out how to get the gem to align to the right side of the container. Below is the XAML:
<Border Background="#FFFFB78F" Margin="-2,0,0,0">
<Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFCCB0" Offset="0"/>
<GradientStop Color="#FFFFCCB0" Offset="1"/>
<GradientStop Color="#FFFCE8DD" Offset="0.5"/>
</LinearGradientBrush>
</Border.Background>
<Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" x:Name="Image"/>
<ColumnDefinition Width="150" x:Name="Names"/>
<ColumnDefinition Width="120" x:Name="Address"/>
<ColumnDefinition Width="120" x:Name="Dates"/>
<ColumnDefinition Width="200" x:Name="OtherInfo"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/>
<StackPanel Grid.Column="1" Margin="4,4,4,0">
</StackPanel>
<StackPanel Grid.Column="2" Margin="4,4,4,0">
<StackPanel Orientation="Horizontal">
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="3" Margin="4,4,4,0">
</StackPanel>
<StackPanel Grid.Column="4" Margin="4,4,4,0">
</StackPanel>
<!-- Gem -->
<Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" d:LayoutOverrides="GridBox">
<Border.Background>
<RadialGradientBrush>
<GradientStop Color="#FF760000" Offset="1"/>
<GradientStop Color="Red"/>
<GradientStop Color="#FEFF0000" Offset="0.15"/>
</RadialGradientBrush>
</Border.Background>
</Border>
<Grid Margin="0,0,-298.067,0" VerticalAlignment="Top" Height="13.277" Grid.Column="6" >
</Grid>
</Grid>
</Border>
</Border>
The Gem Border is toward the bottom. Initially I created the containing grid with a column set to Auto in the hopes that it would fill the remaining space, pushing the last column over to the right edge, but grid columns don't really work that way. I also tried putting a hidden textblock filled with space characters in there to try and get it to expand (hoping that it would continue to constrain itself to the list boxes width, also to no avail.
To expand to remaining space you need a column set to Width="*". Auto indicates that the column should size to fit its contents, where * indicates that it should fill its parent.
Without seeing the rest of your XAML I expect that you're also getting the default Left alignment for your ListBoxItems so just the * width will give you the same behavior. You can fix that by setting HorizontalContentAlignment="Stretch" on the parent ListBox (unless you have other things going on with your ListBox layout not shown here).
Well you can put the grid into another grid, and add Gem to the outer grid, with HorizontalAlignment="Right". E.g.:
<Border Background="#FFFFB78F" Margin="-2,0,0,0">
<Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFCCB0" Offset="0"/>
<GradientStop Color="#FFFFCCB0" Offset="1"/>
<GradientStop Color="#FFFCE8DD" Offset="0.5"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" x:Name="Image"/>
<ColumnDefinition Width="150" x:Name="Names"/>
<ColumnDefinition Width="120" x:Name="Address"/>
<ColumnDefinition Width="120" x:Name="Dates"/>
<ColumnDefinition Width="200" x:Name="OtherInfo"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/>
<StackPanel Grid.Column="1" Margin="4,4,4,0">
</StackPanel>
<StackPanel Grid.Column="2" Margin="4,4,4,0">
<StackPanel Orientation="Horizontal">
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="3" Margin="4,4,4,0">
</StackPanel>
<StackPanel Grid.Column="4" Margin="4,4,4,0">
</StackPanel>
</Grid>
<!-- Gem -->
<Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" >
<Border.Background>
<RadialGradientBrush>
<GradientStop Color="#FF760000" Offset="1"/>
<GradientStop Color="Red"/>
<GradientStop Color="#FEFF0000" Offset="0.15"/>
</RadialGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
But I'm pretty sure there are many other ways to improve this XAML. Maybe if you give us a picture, we could give better solution? One picture worth hundred words, you know :)...
Cheers, Anvaka.

Silverlight (2.0/3.0) Shape downloads

Does anyone know of a place to download pre-built or defined silverlight (2.0/3.0) shapes?
It sounds like you need to get a feel for Xaml - maybe these tutorials would help: http://silverlight.net/learn/videocat.aspx?cat=2#HDI2Controls
The site silverzine.com also has some good Xaml how-tos. The specific instance you commented on, like a a rectangle with rounded edges and a bullet list could be constructed like this:
<Border CornerRadius="20" BorderThickness="4" Width="400" Height="300" BorderBrush="Black">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0.0" />
<GradientStop Color="White" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Margin="10" Orientation="Vertical">
<ListBox Height="200">
<ListBox.Items>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="15" Fill="Black"/>
<TextBlock Margin="10,4,0,0" Text="Item 1"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="15" Fill="Black"/>
<TextBlock Margin="10,4,0,0" Text="Item 2"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="15" Fill="Black"/>
<TextBlock Margin="10,4,0,0" Text="Item 3"/>
</StackPanel>
</ListBox.Items>
</ListBox>
<Button Margin="10" Content="Click Me!"/>
</StackPanel>
</Border>
To answer the question, I don't know of a site that has examples that the one you said you were looking for. I think a good strategy would be to narrow down your search a bit and tackle one thing at a time. Start with the border, then look around for gradients, etc. Good luck!

Resources