In my windows phone 8 application, i have one image view, by default it is set to local static image.
<Image x:Name="advImage" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Images/banner.jpg" Stretch="Fill" Margin="0,0,0,0"/>
Now after loading the page, I want to get the original image from the server and should be replace the above static image. This task should be done in background via thread so that the user interface should not be blocked. I don't want to display any progress bar while downloading the image.
I'm new to windows phone 8. Please provide your solutions to the problem.
Thanks.
You need too use databinding(binding)
<Image x:Name="advImage" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Source="'Binding Image,mode=twoway" Stretch="Fill" Margin="0,0,0,0"/>
private string _image;
public string Image{
get
{
return m_IconPath;
}
set
{
_IconPath = value;
PropertyChanged ("IconPath");
}
}
Now when your user is connected get your server image and set the property Image.
Related
i need to preview default image while getting my exact image from a url
here's my code for getting the image
Uri uri = new Uri(myUrl);
Profile.Source = new BitmapImage(uri);
"Profile" is the Image that previews the requested image
You can use two images. The first one will be the placeholder you want, and the second one will be the profile picture that will show up later and cover the first one.
You need these images to be in the same palce, one above the other. You can user Grid to achieve that.
<Grid>
<Image x:Name="Placeholder" Source="/Assets/Placeholder.png" />
<Image x:Name="Profile" ImageOpened="Profile_ImageOpened" />
</Grid>
The Placeholder.png is an image that has been added to the project.
Now, we want to know, when profile picture is download. Event ImageOpened gives us the way. We can use it to hide the placeholder when the profile picture is fully downloaded.
private void Profile_ImageOpened(object sender, RoutedEventArgs e)
{
Placeholder.Visibility = Visibility.Collapsed;
}
I've got a LongListSelector for which I select the appropriate DataTemplate based on data I receive according to user's selections.
There are 3 of those DataTemplates which I define in the page's resources and set the appropriate one -just before populating my LongListSelector- using:
RoutesLongListSelector.ItemTemplate = Resources["SecondItemTemplate"] as DataTemplate;
There is an element in these DataTemplates -a StackPanel- where I add some children after populating my list.
<StackPanel x:Name="MyStations" Grid.Column="1" Grid.Row="1">
</StackPanel>
So, when I try to use its name in order to add children [MyStations.Children.Add(...)] I get this error: 'MyStations' does not exist in the current context.
I tried to set one of the Templates as default in the page's ContentPanel but I still get the same error.
Seems to be a minor issue but I couldn't think of something.
Any suggestions?
You can't access UI elements of DataTemplete with their Name property, i.e. x:Name. You can use it's loaded event to access it. Please be specific on your requirement.
<StackPanel x:Name="MyStations" Grid.Column="1" Grid.Row="1"
Loaded="MyStations_Loaded" />
private void MyStations_Loaded(object sender, RoutedEventArgs e)
{
var _StackPanel = (StackPanel)sender;
}
Currently we are using the HubTile to display a large (50-70) images and text overlayed.
<toolkit:HubTile Margin="0,12,12,0"
Title="{Binding title}"
Message="{Binding itemLink}"
Source="{Binding media}"
GroupTag="BindingHubTile"
Style="{StaticResource HubTileStyle1}">
</toolkit:HubTile>
<TextBlock Height="Auto" FontSize="14" FontFamily="{StaticResource PhoneFontFamilyLight}"
TextWrapping="Wrap" Text="{Binding votes}" TextTrimming="WordEllipsis" VerticalAlignment="Bottom"
Foreground="{StaticResource PhoneForegroundBrush}" TextAlignment="Right" Margin="0,0,15,-7" />
The source is bound to a URI that is retrieved from a webserver which then allows the phone to download the image and display it. The problem is, with this amount of images we are finding that the UI is locking up.
Our hubtiles are loaded into a listbox by means of listbox.ItemSource.
Is there an easy way around this?
When you set to an image - URI it downloads in background and doesn't lock the UI - tested.
The only thing that remains is to find where you have locked it.
I had a similar project, but i created CustomControls to fill ListBox. Custom Control contained - date field, text and image.
Image was loaded like this:
BitmapImage image = new BitmapImage(new Uri(article.ImageURL));
NLBI.Thumbnail.Source = image;
And all images were loading async in background and UI was usable.
I have a longlistselector for which I have a data template that defines the type of items to be added to the list. The data template has an Image control whose source is binded with path dynamically, thus each item in list has an associated Image Control. The problem I face is that these Image control never free the memory they occcupy resulting in out of memory exception. On normal scenario I set bitmapImage.UriSource=null to deallocate the memory associated with the bitmap But can't find a way to do so in this scenario. Here is the xaml code for the longlistselector and the data template associated with it..
Data Template
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="MediaItemTemplate">
<Canvas VerticalAlignment="Top">
<Border BorderBrush="#FF4791CA" BorderThickness="3">
<Image Height="100" Width="100" VerticalAlignment="Top" Grid.RowSpan="2" Stretch="UniformToFill">
<Image.Source>
<BitmapImage UriSource="{Binding path}" CreateOptions="BackgroundCreation" DecodePixelHeight="50" DecodePixelWidth="50"/>
</Image.Source>
</Image>
</Border>
<Image Source="/Icons/check.png" Height="16" Width="16" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" Margin="80,7,7,0" Canvas.ZIndex="100" OpacityMask="Black" Visibility="{Binding visibility}" Name="checkImage" >
</Image>
</Canvas>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
LonglistSelector
<phone:LongListSelector
Tap="ListMedia_Tap"
x:Name="ListMedia"
HorizontalAlignment="Left"
Height="624"
VerticalAlignment="Top"
Width="436"
Background="Transparent"
ItemTemplate="{StaticResource MediaItemTemplate}"
LayoutMode="Grid" GridCellSize="120,120"/>
I am very new to windows phone programming, What basically I want to do is to develop kind of image browser experience. Please Help me out with ways to deallocate the memory. In case I am doing it completely wrong please correct me or suggest better ways to achieve the same functionality. Thanx in advance...
A solution I've found to handle this case is making a custom control to automatically set the urisource to null:
public class SafePicture : System.Windows.Controls.ContentControl
{
public SafePicture()
{
this.Unloaded += this.SafePictureUnloaded;
}
private void SafePictureUnloaded(object sender, System.Windows.RoutedEventArgs e)
{
var image = this.Content as System.Windows.Controls.Image;
if (image != null)
{
image.Source = null;
}
}
}
Then, just wrap all your pictures in that control:
<my:SafePicture>
<Image Source="{Binding Path=path}" />
</my:SafePicture>
By default Windows Phone stores messages downloaded from a Uri in memory to save having to load them again. (It's a crude form of caching.)
To free the memory used by these images you needed to explicitly free all references to them. See MSDN: Image Tips for Windows Phone 7 for more details
When scrolling with your code (without using Loaded), then images are lost after scrolling down and returning to the top of the list (speed no matter). While using Loaded, scrolling wokrs okay: it is possible to scroll down and return to the top, (debugger shows that Unloaded and Loaded are called), and images are there. However, when moving to another page (i have master-detail pages), they are mixed up.
I am new to WP development and trying to get hands-on.
If you look at wallet pin screen, focus is automatically set to textbox so that user can start typing and also the keyboard does not hides/overlaps done & cancel button.
Also, If you hit back key, those buttons remain at bottom as shown below.
I am also trying to have same kind of UI. However, In my case
I am not able to set focus to textbox as soon as page is loaded. I
can't get .Focus() method of textbox in OnNavigatedTo event. Where
should i do this ?
When i manually tap textbox to enter a value, the keyboard overlaps
my stackpanel containing 'save' & 'cancel' button as shown below. I
don't want this to happen. Instead the screen should look like as
shown in 2nd image.
Below is the XAML code i tried.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock Name="txtLimit" TextWrapping="Wrap" Text="Enter the value" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBox AcceptsReturn="True" InputScope="Number" />
</StackPanel>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center" Orientation="Horizontal" >
<Button Content="save" Width="200" />
<Button Content="cancel" Width="200"/>
</StackPanel>
</Grid>
For setting the focus for first time navigation you apparently have to set this in the Loaded event handler.
For back navigation (from when you application is switched away), the one in OnNavigatedTo will fire as you'd expect.
// Constructor
public MainPage()
{
InitializeComponent();
this.Loaded += (sender, args) => this.textBox.Focus();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
this.textBox.Focus();
}
However you will need to add your buttons to the ApplicationBar to show below the on-screen keyboard.
However the SDK doesn't allow use of rectangular buttons in the application bar, only icon buttons.
In the OnNavigatedTo method, can you try to use the Dispatcher like this :
Dispatcher.BeginInvoke(()=>{
this.textBox.Focus();
});
And, as pointed out, you can NOT have rectangular buttons in the appBar but you can use standard one (like the linked in button for example).