I am using a listbox to bind a list of images using the code:
<ListBox Name="lstBoxImages" Height="645" VerticalAlignment="Top" Width="480">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Height="Auto" Width="480" ItemHeight="120" ItemWidth="120"></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Width="120" BorderThickness="2">
<StackPanel Orientation="Vertical" Width="110" >
<Image Height="110" Width="110" Source="{Binding imageName}" Stretch="Uniform"/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now i want to drag the images and shift the location of images. Can anyone help me out on this?
An example would be appreciable.
Thank you!!
You can find an sample project here
http://www.codeproject.com/KB/silverlight/SL4DragDropListBox.aspx?pageflow=Fluid&fid=1572066&df=90&mpp=25&noise=3&sort=Position&view=Quick
http://www.kunal-chowdhury.com/2009/12/silverlight-drag-and-drop-listboxitem.html
Related
I am trying to write on panaroma application in tile image title.
And I can not see like a below code in .xaml page;
<image Title="blabla" ...>
This is my code;
<phone:PanoramaItem Header="Kişisel Bilgiler" Orientation="Horizontal">
<!--Double wide Panorama with large image placeholders-->
<Grid>
<StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,12,0,0">
<toolkit:WrapPanel>
<Border BorderBrush="AliceBlue" BorderThickness="1" Margin="12,0,0,0">
<Image Width="173" Height="173" Source=".\Assets\cinsiyet.png" Tag="img_deneme" Margin="0,0,0,0" x:Name="img_cins" MouseEnter="Image_MouseEnter" />
</Border>
</toolkit:WrapPanel>
</StackPanel>
</StackPanel>
</Grid>
</phone:PanoramaItem>
But I want to
Thank is advance.
(Sorry my language)
Image control doesn't have any property to display text similar to Tile's title. You need to add other control to display the title, for example using TextBlock :
<toolkit:WrapPanel>
<Grid>
<Border BorderBrush="AliceBlue" BorderThickness="1" Margin="12,0,0,0">
<Image Width="173" Height="173" Source=".\Assets\cinsiyet.png" Tag="img_deneme" Margin="0,0,0,0" x:Name="img_cins" MouseEnter="Image_MouseEnter" />
</Border>
<TextBlock Margin="0,150,0,0" Text="Tile Title" Foreground="White"/>
</Grid>
</toolkit:WrapPanel>
You may also want to try HubTile control as an alternative.
Hi i want selected listbox item highlight border color.am using code given below.please help me any one.
<ListBox x:Name="NotchsList11" Width="Auto" Grid.RowSpan="5" Margin="0,59,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Grid.ColumnSpan="3" x:Name="ControlsPanel"
Height="234"
VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock Grid.Row="1" FontFamily="Calibri" FontSize="34" FontWeight="Bold" FontStyle="Normal" Padding="10,0,0,0"
Text="{Binding name}" VerticalAlignment="Bottom"
/>
</StackPanel>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<StackPanel Width="Auto">
<StackPanel VerticalAlignment="Top" Width="Auto">
<ListBox ItemsSource="{Binding Articles}" Margin="5,5,5,0" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="NotchsList11_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#302c2d" Background="#302c2d" BorderThickness="5,5,5,0" Name="image" Margin="3,0,3,0">
<Image Source="{Binding Image}" Width="141" Height="120" Name="value" Stretch="Fill" VerticalAlignment="Top"></Image>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Width="Auto">
<ListBox x:Name="NotchsList11" ItemsSource="{Binding Articles}" Margin="5,0,5,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="NotchsList11_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<Border BorderBrush="#302c2d" Background="#302c2d" BorderThickness="5,5,5,0" Margin="3,0,3,0">
<TextBlock Text="{Binding Titles}" Width="141" Height="85" Padding="3,0,0,30" TextWrapping="Wrap"></TextBlock>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</StackPanel>
</ScrollViewer>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This is am using code,i dont know how to set selected item border.so please help me how to resolve in this issue.Avance Thanks
I need output like given below image selected item border red.
Modify according your requirement:
customize-the-wp7-listbox-selected-item-visual-states
Hi am using xaml file given below.I want to get selected item value to details view.
<StackPanel Width="Auto">
<StackPanel VerticalAlignment="Top" Width="Auto">
<ListBox ItemsSource="{Binding Images}" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="NotchsList11_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="White" Margin="0,0,8,0" BorderThickness="1">
<Image Source="{Binding}" Width="152" Height="90" Stretch="Fill" VerticalAlignment="Top"></Image>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Disabled" Width="Auto">
<ListBox ItemsSource="{Binding Titles}" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="NotchsList11_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<Border BorderBrush="White" Margin="0,0,8,0"
BorderThickness="1">
<TextBlock Text="{Binding}" Width="152" Height="80" Padding="5,10,0,0" TextWrapping="Wrap"></TextBlock>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</StackPanel>
My Main.Cs Code
private void NotchsList11_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
NavigationService.Navigate(new Uri("/Test.xaml?parameter={0}",UriKind.Relative));
//NavigationService.Navigate(new Uri("/Page1.xaml?parameter=test", UriKind.Relative));
}
}
I used this thing i cant go to other page with selected item.
i want output like given below image
The simple and efficient approach - have a ViewModel. When the item is selected (hook the SelectionChanged event handler), pass the instance to the ViewModel and navigate to the second page that will show the item details. Make sure that the page is bound to the ViewModel and simply read from the item you passed in.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Is there any way to get XAML element by Tag property?
I have a code like this:
<ListBox x:Name="ImageListBox" ScrollViewer.VerticalScrollBarVisibility="Disabled"
Height="100" >
<ListBox.ItemsPanel >
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemHeight="100" ItemWidth="110" VerticalAlignment="Center" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Tap="StackPanel_Tap" Tag="{Binding Type}" Name="Yashu">
<Border BorderThickness="{Binding Thickness}" CornerRadius="0" BorderBrush="White" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1" >
<!--<Grid>-->
<Image Tag="{Binding Type}" Source="{Binding Location}" Opacity="1" Width="100" Height="100" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="True" >
</Image>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
How to get an grid element in ListBox by its tag name?
In the event handler StackPanel_Tap, convert the sender to grid.
object tag = (sender as Grid).Tag;
and to get the grid element use Grid grid1 = sender as Grid;
Note: This works only if user taps on an item. I hope it helps
<ListBox Margin="0,2,0,0" SelectionChanged="OnSelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="lstUcpPanel" ItemContainerStyle="{StaticResource myContainerStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="Auto" Height="Auto" Margin="-7,-8,-7,0" ItemWidth="246" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Margin="3.5,1,0,0" BorderBrush="Transparent">
<StackPanel Orientation="Vertical" Background="LightGray">
<Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" ></Image>
<TextBlock Text="{Binding name}" TextWrapping="Wrap" Foreground="Black" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I am using the above code for showing a data as in following format:
but when the [name] is long like "Settings flkjadsflka fdsaflksdj flhasdjhfl asd", then the design becomes like this:
What i want to know is that is there anyway i can show the items in a uniform format without any distortion with uniform height of the item.
Set the stretch property on your image to Stretch="Fill"
<Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" Stretch="Fill" ></Image>
How about giving the items in the WrapPanel a fixed Height?
<toolkit:WrapPanel ItemHeight="80" ... />