I have created a multiselectlist that included a stackpanel and with images and text that each correspond to a checkbox control. My implementation works correctly, although I cannot get the image and text to align correctly with the checkbox! I was wondering if there was a better way than simply adjusting the margins, but if not how could this be accomplished?
MainPage.xaml
<toolkit:MultiselectList x:Name="connectionTypeMultiSelectList" HorizontalAlignment="Left" VerticalAlignment="Top" Tap="connectionTypeMultiSelectList_Tap">
<toolkit:MultiselectList.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,0,0,0">
<Image Source="{Binding Icon}" Width="35" Height="35" Margin="0"/>
<TextBlock Text="{Binding Name}" Margin="10"/>
</StackPanel>
</DataTemplate>
</toolkit:MultiselectList.ItemTemplate>
</toolkit:MultiselectList>
Try setting the height of the stackpanel and specify the image to fit and text as TextAlign=Center.
Try the following margin values in your design and let me know if it works or not. It worked for dummy data which I created. I hope it works for you too.
<StackPanel Orientation="Horizontal" Margin="12,0,0,0">
<Image Source="{Binding Icon}" Width="35" Height="35" Margin="0,-12,0,0"/>
<TextBlock Text="{Binding Name}" Margin="12,5,0,0"/>
</StackPanel>
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.
I have a listbox which contains a textblock and an image. I want if the text is too long it goes to a second line. At the moment only have of the text is visible. Here is my XAML
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imgurl}" MaxHeight="120" MaxWidth="120" Margin="0,10,0,0" />
<TextBlock Text="{Binding title}" Margin="50,0,12,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Could anybody help me?
Screenshot
Ah ya, so I guess it is as simple as it looked. You just need to restrict the width of where your text is and invoke TextWrapping, which you have multiple options to accomplish that. Here's a couple possibilities...
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imgurl}" MaxHeight="120" MaxWidth="120" Margin="0,10,0,0" />
<TextBlock Text="{Binding title}" Margin="50,0,12,0" TextWrapping="Wrap" MaxWidth="{Binding ActualWidth, ElementName=Self}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Or you could have a panel do it which should get restricted by its parent...
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding imgurl}" MaxHeight="120" MaxWidth="120" />
<TextBlock Grid.Column="1" Text="{Binding title}" TextWrapping="Wrap" Margin="50,0,2,0" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Or depending on how this ListBox is layed out as a child, it could possibly even be as easy as just adding TextWrapping="Wrap" to the TextBlock and then setting the MaxWidth on the ListBox itself. Either way, hope this helps... :)
i Would like to make simple ListBox. Each line should contain 2 controls, one aligned to the left the other to the right, thats all :)
I tried multiple approaches but nothing worked. My code is following
<StackPanel Grid.Row="1" Margin="12,0,12,0" Grid.Column="0">
<ListBox Name="ListBox" Margin="12,0,12,0" ItemsSource="Exercises" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width=">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
(Two textblocks are just for demonstration, in real application i'd like to bind one text block to real data, instead of second ill use button.)
When ill compile this, both textblock are aligned to the left, in emulator, it seems like one textblock with text "abcdef".
Any idea how to align one text block to the right and the other one to the left?
many thanks :)
By default the ListBoxItem does not fill the space it is given. It aligns itself and the content to the left. To ensure that the content of your ListBoxItem spans the entire width, you need to change the ItemContainerStyle
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Now the content will span the available width. If you wish to use a StackPanel as in your example, make sure to set it's HorizontalAlignment also. The StackPanel also does not fill in the available space given
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
However, I would recommend using a Grid and defining two columns
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
I Have a little problem with a ListBox and its elements. As you can see in my code, the stackpanel for both textblocks is set to 250. This is set like this because otherwise the text expands in 1 line and you cannot see the button. As obvious the problem is that setting this parameter as static, if the resolution or the orientation changes wont fit the screen completely. I would like to know if there is a way to set this width dynamically.
<ListBox x:Name="attractionsListbox" Margin="0,0,-12,0" ItemsSource="{Binding Attractions}" Loaded="attractionsListbox_Loaded">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Tag="{Binding Name}" Tap="AttractionListBoxItem_Tap">
<Image Height="140" Width="140" Margin="0,5,0,0" Source="{Binding Thumbnail}" MaxWidth="140" MaxHeight="140" Stretch="Fill" />
<StackPanel Width="250">
<TextBlock x:Name="AttractionName" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}" FontSize="20" Foreground="Black" FontWeight="Bold" />
<TextBlock Text="{Binding ShortDescription}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSmallStyle }" Foreground="Black" />
</StackPanel>
<Button Width="80" Height="80" Padding="10,3,10,5" BorderBrush="Black" Click="Add_Todo_Click" Tag="{Binding Name}">
<Button.Background>
<ImageBrush ImageSource="/SundsvallWP7;component/Images/appbar.add.rest.png"/>
</Button.Background>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
(In android there is weights, where you can assign the weight of each control, don't know if this exists in Windows Phone).
Thank you very much.
A DockPanel may work better for your scenario than a StackPanel. Put the button on the right and the image on the left, then your middle StackPanel content will flow to fill.
http://www.windowsphonegeek.com/articles/Using-DockPanel-in-WP7.
Alternatively, there are only the two orientations and resolution shouldn't be changing. You could just bind the Width to the Orientation with a value converter.
i created an app to track tweets and binding it to listBox.
and, here is the xaml of the listBox:
<ListBox Margin="0,0,-12,0" x:Name="listBox1" ItemsSource="{Binding Items}" SelectionChanged="listBox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Image Height="100" Width="100" Source="{Binding DeveloperImage}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding DeveloperName}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding DeveloperBirthday}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
but, when it was debugged, it returned into this sequence:
long blank
content
blank
what i want is:
content only, no blanks befor the content and no blanks after the content.
The way a ListBox arranges its Children is determined by its ItemsPanel.
You can replace the default ItemsPanel by setting the ItemsPanelTemplate.
Each Child is then wrapped in an ItemContainer.
You can replace the default ItemContainer by setting the ItemContainerStyle.
Finally, the ListBox itself has a border, padding and margin that influence where the ItemsPanel is placed.
So if you want to adjust the placement of the content of the listbox you will first have to find out what template(s) should be modified. A quick way is to use Blend because it will give you visual feedback.