Silverlight ListBox Height Automatically increase - silverlight

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.

Related

How to set margin for a single cell inside stack panel for multiple controls in WPF?

I need the textbox1 control ought to put by lable1 and textbox2 control ought to put alongside lable2. I am utilizing single cell from a Grid for this whole control allignment. i can't drag and place the controls wherever i need. is there some other conceivable approach to drag and place my controls inside a cell in grid?
Here's my XAML code..
<Grid Background="#BFBFBF">
<StackPanel Margin="2,2,2,2" >
<Grid Margin="2,2,2,2" VerticalAlignment="Top">
<Grid.RowDefinitions >
<RowDefinition Height="35*"/>
<RowDefinition Height="35*"/>
<RowDefinition Height="35*"/>
</Grid.RowDefinitions>
<!-- 1st Content-->
<Border Margin="4,2,2,2" BorderBrush="#FF0100A3" Grid.Row="0" CornerRadius="3,3,3,3" VerticalAlignment="Top" BorderThickness="2,2,2,2" Height="30" MouseLeftButtonDown="brdSectionOne_MouseLeftButtonDown">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5E68CE" Offset="0"/>
<GradientStop Color="#FF5B64CA" Offset="1"/>
<GradientStop Color="#FF000C82" Offset="0.356"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Section 1" Grid.ColumnSpan ="2" Foreground="White" Grid.Row="0" FontFamily="Segoe UI" FontSize="13" Margin="8,5,2,0" VerticalAlignment="Top" FontWeight="Normal" Cursor="Hand" />
</Border>
<StackPanel x:Name="spnlFirstSection" Grid.Row="0" VerticalAlignment="Bottom" Height="436" Margin="3,35,3,0" >
<Border Margin="1,1,1,1" CornerRadius="3,3,3,3" VerticalAlignment="Top" BorderThickness="2,2,2,2" Height="430" Background="#FFFFFFFF" BorderBrush="#FF4C4BEE" >
<StackPanel Grid.ColumnSpan ="2" Grid.Row="0" Height="445" Margin="6,6,6,0" VerticalAlignment="Top" >
<Label x:Name="lbl_1" Content="Label 1" Margin="50,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="-1.895,0" FontSize="14"/>
<TextBox x:Name="textbox1" Margin="300,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="textbox1" Height="25" TextWrapping="Wrap" Width="250" FontSize="18"/>
<Label x:Name="lbl_2" Content="Label 2" Margin="50,30,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="-1.895,0" FontSize="14"/>
<TextBox x:Name="textbox2" Margin="300,30,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="textbox2" Height="25" TextWrapping="Wrap" Width="250" FontSize="18"/>
</StackPanel>
<!--<TextBlock Text="Section 1 Content" Grid.ColumnSpan ="2" Foreground="#FF000000" Grid.Row="0" FontFamily="Segoe UI" FontSize="13" Margin="6,6,6,0" VerticalAlignment="Top" FontWeight="Normal" Cursor="Hand" Height="445" />-->
</Border>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
A StackPanel stacks either Vertically (default) or Horizontally. Like so:
<StackPanel>
<TextBlock Text="Foo"/>
<TextBlock Text="Bar"/>
</StackPanel>
Will render:
Foo
Bar
While
<StackPanel Orientation="Horizontal">
<TextBlock Text="Foo"/>
<TextBlock Text="Bar"/>
</StackPanel>
Will render:
Foo Bar
If you want something to look like a Grid you should use a Grid! So if you want something like this:
LabelOne: Foo
LabelTwo: Bar
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="LabelOne:" /> <!-- Grid.Row and Grid.Column default to 0 -->
<Label Content="LabelTwo:" Grid.Row="1" />
<TextBox Text="Foo" Grid.Column="1" />
<TextBox Text="Bar" Grid.Row="1" Grid.Column="1" />
</Grid>
You could also try and nest StackPanels like so:
<StackPanel Orientation="Horizontal">
<StackPanel>
<Label Content="LabelOne:" />
<Label Content="LabelTwo:" />
</StackPanel>
<StackPanel>
<TextBox Text="Foo" />
<TextBox Text="Bar" />
</StackPanel>
</StackPanel>
But that will problably get you some unwanted behaviours.

Scrollviewer and ItemsControl VerticalScrolling into nirvana

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>

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

WPF TexBlock in Grid in ListView not Sizing Correctly?

I have a TextBlock that is in a Grid that is an ItemTemplate for a ListView. I have the items so that they grow when the window is resized, but I cannot figure out how to have the TextBlock be limited to that size. I've tried to do this with the width on the ColumnDefinition - if I set the Width to a fixed number (say 350) the text wraps correctly, but obviously the TextBlock doesn't expand when the window is expanded - if I set the Width to "*" the there is then a horizontal scroll bar and the text runs off to the right and doesn't wrap.
Any idea what I'm doing wrong here?
<GroupBox Header="Urgent Items" Margin="8,8,8,340" Name="UrgetItemsGroupBox">
<Grid>
<ListView Margin="6" Name="CriticalErrorsListView" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Path=.}" MouseDoubleClick="CriticalErrorsListView_MouseDoubleClick">
<ListView.Background>
<LinearGradientBrush EndPoint="-0.192,0.529" StartPoint="0.998,0.519">
<GradientStop Color="#FFD2D2D2" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</ListView.Background>
<ListView.ItemTemplate>
<DataTemplate>
<Border Margin="2,2,2,3" BorderBrush="#FF847F6E" CornerRadius="10" BorderThickness="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.RowSpan="5" Grid.Column="0" Margin="2,2,2,2" Source="Images\errorIcon.png" />
<TextBlock Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" Margin="2,2,2,2" Text="{Binding Path=ApplicationName}" FontFamily="Calibri" FontWeight="Bold" FontSize="18" />
<TextBlock Grid.Row="1" Grid.Column="2" Margin="10,2,10,2" Text="{Binding Path=ErrorTime}" FontFamily="Calibri" FontSize="12" />
<TextBlock Grid.Row="2" Grid.Column="2" Margin="10,2,10,2" Text="{Binding Path=ErrorPerson}" FontFamily="Calibri" FontSize="12" />
<TextBlock Grid.Row="3" Grid.Column="2" Margin="2,2,2,2" Text="{Binding Path=ShortDescription}" TextWrapping="Wrap" />
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</GroupBox>
You see horizontal scroll bar because ListView uses ScrollViewer in its template to allow scrolling. All you need to do is say ScrollViewer to not scroll horizontally. Just set ScrollViewer.HorizontalScrollBarVisibility="Disabled" on your ListView. So you'll have something like this:
<ListView Margin="6"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Name="CriticalErrorsListView"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Path=.}"
MouseDoubleClick="CriticalErrorsListView_MouseDoubleClick">
<!-- The rest goes here. -->
</ListView>
Hope this helps.

Resources