I have list box where I need to display image from the internet
I have a data-source like this:
and I bind "image" in listbox using DataTemplate like this:
<DataTemplate x:Key="DataTemplate1">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image Source="{Binding image}"></Image>
<TextBlock Text="{Binding imagedec}"></TextBlock>
</Grid>
</DataTemplate>
I am able to see the image but it comes late, what will be best way to display images in this situation?
This is because the image has to be loaded from the internet (or cache) first. Try adding a gray background as placeholder and set a fixed height and width:
<Border Background="{StaticResource PhoneInactiveBrush}" Width="100" Height="100">
<Image Source="{Binding image}" Stretch="UniformToFill" Width="100" Height="100" />
</Border>
This solution works only if you can set a fixed height and width...
UPDATE
You should use LowProfileImageLoader to improve performance:
http://blogs.msdn.com/b/delay/archive/2010/09/02/keep-a-low-profile-lowprofileimageloader-helps-the-windows-phone-7-ui-thread-stay-responsive-by-loading-images-in-the-background.aspx
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.
Is there any way to get the XAML element by its tag value??
My code is like this :
<Grid Tap="StackPanel_Tap" Tag="{Binding Type}" >
<Border BorderThickness="0" CornerRadius="0" BorderBrush="White" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1" >
<Image Tag="{Binding Type}" Source="{Binding Location}" Opacity="1" Width="100" Height="100" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="True" >
</Image>
</Border>
</Grid>
I am binding Tag Property for Grid , is there any way to get an object of Grid by using Tag Propertty??
Sorry for less information the thing is grid is in ListBox ..
How can i Access The Grid Object??
Thanks and Reagrds
Yashavantha
Create a recursive method which uses System.Windows.Media.VisualTreeHelper to get all children of the page. For each child test if it's of type Grid and if it has a Tag equal to whatever you're looking for.
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>
In my project, I use ScrollViewer to show some long height infomation.
I use like this:
<Grid Grid.Row="1" Height="630">
<ScrollViewer Background="Red" Grid.Row="1">
<Grid>
<Rectangle Height="3000" Fill="LightBlue" Width="440"/>
</Grid>
</ScrollViewer>
</Grid>
But, unfortunately, the rectangle does not show completely when scrollView bar's vertical height > 2000.
I have tested without Grid as ScrollViewer's content, only with Rectangle and the result is the same.
And the bug is also happens with Width.
Any you have any idea what's the workaround? How to deal with it?
This post is the same issue without any fixes.
The test full xaml is :
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid Grid.Row="1" Height="630">
<ScrollViewer Background="Red" Grid.Row="1">
<Grid>
<Rectangle Height="3000" Fill="LightBlue" Width="440"/>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
If it just a text, you could use this custom control: scrollable textblock. Otherwise, divide your content into blocks with size < 2048.
UPD:
2048px is a limit for GPU cached graphics. You can use a lot of controls (< 2048) inside a scrollviewer (total > 2048). In some cases all is fine, but in some it doesn't
For example:
<ScrollViewer Background="#4FFF6060">
<Grid Background="#FFFF8A8A" Width="240" HorizontalAlignment="Left" d:LayoutOverrides="Height">
<Rectangle Fill="Blue" Height="4000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Left"/>
<Rectangle Fill="Red" Height="2000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Right"/>
<Rectangle Fill="Red" Height="2000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Right" Margin="0,2000,0,0"/>
</Grid>
</ScrollViewer>
In this case blue rectangle cropped at 2048px, but two rectangles with 2000px height placed one above the other looks fine.
The second example uses StackPanel to show 4000px area and it works too
<StackPanel Background="#FFFF8A8A" HorizontalAlignment="Right" Width="240" d:LayoutOverrides="Height">
<Rectangle Fill="#FF88FF00" Height="2000" Width="240" HorizontalAlignment="Right"/>
<Rectangle Fill="#FF88FF00" Height="2000" VerticalAlignment="Top" Width="240" HorizontalAlignment="Right"/>
</StackPanel>
Max. texture size on WP7 is 2048x2048. The rectangle height exceeds this limit. Once you decrease it below this limit, it starts working.
This code is better suited to experiments as you can identify bottom border:
<Grid Grid.Row="1" Height="630">
<ScrollViewer Background="Red" Grid.Row="1">
<Grid>
<Border Height="2048" BorderBrush="Blue" BorderThickness="5">
<Rectangle Height="2000" Fill="LightBlue" Width="440"/>
</Border>
</Grid>
</ScrollViewer>
</Grid>
Once you increase the Border height, the bottom part will disappear.
On the other hand, I have to say that this behavior surprises me, too. I would expect that system decomposes large objects into smaller textures, but apparently WP7 designers decided not to do so, but rather manifest UI bug.
I need to set the Image for Panorama Page's Title, Can we able to do this ? Actually I have done this using TitleTemplate but it is not working.. can you guide me how to set the Image as Panorama Page Title.
The Code is
<controls:Panorama Background="{Binding PanoramaBackground}">
<controls:Panorama.TitleTemplate>
<DataTemplate>
<StackPanel>
<Image x:Name="HeaderImage" Source="/Resources/header_logo.png" />
</StackPanel>
</DataTemplate>
</controls:Panorama.TitleTemplate>
</controls:Panorama>
But This is not working..
Thanks and Regards,
dinesh
I found the answer of my question outside of this forum:
The proper way for draw a big image for all the panorama view in the title position is this:
<controls:Panorama.Title>
<StackPanel Orientation="Vertical" Margin="0,80,0,0">
<Image x:Name="icon" Source="/Resources/Drawables/header_landscape.png" Height="163" Width="1920"/>
<!--<TextBlock Text="my application" FontStyle="Italic" FontSize="40" VerticalAlignment="Center" Margin="0,-40,0,0" />-->
</StackPanel>
</controls:Panorama.Title>
To make the header visible you can also set a top margin for your template in this way:
<DataTemplate x:Key="PanoramaHeader">
<Grid Height="72" Margin="0,72,0,0">
<Image HorizontalAlignment="Left" Height="72" Margin="0" Source="/Assets/Images/header.png" Stretch="Fill" VerticalAlignment="Bottom" Width="72"/>
</Grid>
</DataTemplate>
To make this work you need to actually have some data so that your template is used.
As you don't want to use any passed value in your template you can get this to work by simply setting the Title to an empty string.
<controls:Panorama Title="">
to make this work, remove the leading slash from the image URI. It should be:
<Image x:Name="HeaderImage" Source="Resources/header_logo.png" />