UWP XAML ImageBrush.imageSource from networkshare - image

i edited my question:
i have a stack panel with buttons from array.
now I want to set the Button Background from networkshare images.
here ist my source code:
XAML:
<Page
x:Class="App4.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Height="1205.722" Width="2045.722">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,0,0">
<StackPanel x:Name="sp" HorizontalAlignment="Left" Height="1070" Margin="10,10,0,0" VerticalAlignment="Top" Width="145" Padding="0" CornerRadius="10" RequestedTheme="Light" ScrollViewer.HorizontalScrollBarVisibility="Visible" Grid.RowSpan="2">
<FlyoutBase.AttachedFlyout>
<MenuFlyout/>
</FlyoutBase.AttachedFlyout>
</StackPanel>
</Grid>
Behind Code:
private void onLoad()
{
for (int i = 0; i < imgNames.Length; ++i)
{
ImageBrush brush1 = new ImageBrush();
brush1.ImageSource = new BitmapImage(new Uri("ms-appx:///assets/" + imgNames[i]));
Button button = new Button()
{
Content = string.Format(""),
Tag = i
};
button.Width = 100;
button.Height = 100;
button.Background = brush1;
button.Margin = new Thickness(0, 20, 0, 0);
button.Click += new RoutedEventHandler(button_Click);
this.sp.Children.Add(button);
}
}
Thanks

For loading image from network source you need to use these capabilities in your app
<Capabilities>
<Capability Name="internetClient" />
<Capability Name="privateNetworkClientServer" />
<Capability Name="internetClientServer" />
<uap:Capability Name="enterpriseAuthentication" />
</Capabilities>
and your image
<Image Name="YourImageElementName" />
and loading image in code behind
StorageFolder folder = await StorageFolder.GetFolderFromPathAsync(#"\\Your Image Full Path e.g user\folder\subfolder");
StorageFile file = await folder.GetFileAsync("ImageName.jpg");
using (var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
BitmapImage bitmap = new BitmapImage();
bitmap.SetSource(stream);
YourImageElementName.Source = bitmap;
}
Github sample i created for this https://github.com/shubdragon/LoadNetworkImageRepo
Points need to noted
1) You need to set your network location in code and image name with required extension.
2) must share that location to homegroup.
3) Note code behind in different pages and Package.appxmanifes (view it as code in xml editor)

Related

how to arrange two images side by side in list view in windows phone RT app

I am developing windows phone app,in this app I want to arrange two images side by side using list view control. Actually what happend is I am binding images in listview ,but images are binding one image below another image was binding . how to arrange images side by side in listview and how to set width of the image in all the resolution screens.please help me.
Below is my sample code.
<ListView x:Name="listviewfreecredits" Margin="0,-1,0.643,10" Height="521" IsItemClickEnabled="True" ItemClick="listviewfreecredits_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel >
<Grid Margin="10,10,50,10" Width="389" >
<Image Source="{Binding DealImage}" Stretch="None" Width="400" Height="300" />
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
string result = "";
HttpWebRequest request = HttpWebRequest.Create(Url.weburl + "FreeCredits_v2?PlatFormID=7") as HttpWebRequest;
request.Method = "GET";
WebResponse response = await request.GetResponseAsync();
using (var reader = new StreamReader(response.GetResponseStream()))
{
result = reader.ReadToEnd();
// Do anything with you content. Convert it to xml, json or anything.
}
JObject jobj = JObject.Parse(result);
JArray jarr = (JArray)jobj["Deals"];
if (jarr != null)
{
for (int i = 0; i < jarr.Count; i++)
{
string DealImage = (string)jarr[i]["DealImage"];
string DealID = (string)jarr[i]["DealID"];
string Buttontext = (string)jarr[i]["Buttontext"];
freecredit obj = new freecredit();
obj.DealImage = Url.imgurl + DealImage;
obj.DealID = DealID;
obj.ButtonText = Buttontext;
this.listviewfreecredits.Items.Add(obj);
}
Use GridView control instead of ListView, and for width for each image you can calculate it and bind width and height and height of the image in your image control. e.g.
<GridView x:Name="listviewfreecredits" Margin="0,-1,0.643,10" Height="521" IsItemClickEnabled="True" ItemClick="listviewfreecredits_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel >
<Grid Margin="10,10,50,10" Width="389" >
<Image Source="{Binding DealImage}" Stretch="None" Width="{Bind ImageWidth}" Height="{Bind ImageWidth}" />
</Grid>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
for (int i = 0; i < jarr.Count; i++)
{
string DealImage = (string)jarr[i]["DealImage"];
string DealID = (string)jarr[i]["DealID"];
string Buttontext = (string)jarr[i]["Buttontext"];
freecredit obj = new freecredit();
obj.DealImage = Url.imgurl + DealImage;
obj.DealID = DealID;
obj.ButtonText = Buttontext;
//set image width, height by calculating with height accordingly
obj.ImageWidth = ((Windows.UI.Xaml.Window.Current.Bounds.Width - 50/ 2);
this.listviewfreecredits.Items.Add(obj);
}
Define ImageWidth property as double in your freecredit class

Samples on Pushpin infobox in windows phone 7 bing maps?

How to show the info box when click on pushpins in windows phone 7?i.e when click on pushpin need to show some data and arrow button on the right side of data.please help me ...
when you click on pushpin at that time you display message box.
i.e In Your click event put message box.see bellow coding
pin[i] = new Pushpin();
pin[i].Location = new GeoCoordinate(Latitude, LongLatitude);
map1.Children.Add(pin[i]);
myCoorditeWatcher = new GeoCoordinateWatcher(GeoPositionAccuracy.High);
myCoorditeWatcher.MovementThreshold = 20;
var gl = GestureService.GetGestureListener(pin[i]);
gl.Tap += new EventHandler<GestureEventArgs>(GestureListener_Stack_Tap);
private void GestureListener_Stack_Tap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
for (int i = 0; i <= ClsGetDeviceMap.lstLongLatitude.Count - 1; i++)
{
if (sender.Equals(pin[i]))
{
MessageBox.Show(ClsGetDeviceMap.lstLocationName.ElementAt<string>(i).Trim());
MessageBox.Show(ClsGetDeviceMap.lstLatitude.ElementAt<string>(i).Trim());
MessageBox.Show(ClsGetDeviceMap.lstLongLatitude.ElementAt<string>(i).Trim());
}
}
}
You can customize your Pushpin
for example :
<my:Map Name="map1">
<my:Map.Resources>
<DataTemplate x:Key="pushpinTpl">
<my:Pushpin PositionOrigin="{Binding position}">
<my:Pushpin.ContentTemplate>
<DataTemplate>
<ToggleButton x:Name="togButt" >
<Grid>
<TextBlock Text="click"
Visibility="{Binding ElementName=togButt,Path=IsChecked,Converter={StaticResource BoolConverter},ConverterParameter=!}"/>
<TextBlock Text="alternative content"
Visibility="{Binding ElementName=togButt,Path=IsChecked,Converter={StaticResource BoolConverter}}"/>
</Grid>
</ToggleButton>
</DataTemplate>
</my:Pushpin.ContentTemplate>
</my:Pushpin>
</DataTemplate>
</my:Map.Resources>
<my:MapItemsControl ItemsSource="{Binding items}"
ItemTemplate="{StaticResource pushpinTpl}"
/>
</my:Map>
hope this help :)
There are alot of examples on the Bind sdk site:
http://www.bingmapsportal.com/isdk/ajaxv7

WP7 change a button image in code with a url

Set a button's background is not as simple as android's dev.it's more complex;
in .xaml file:
<Button Click="Button_Click" x:Name="img_btn">
<Button.Template>
<ControlTemplate>
<!--set button background that we can hanle click event-->
<Image HorizontalAlignment="Left" Margin="0,-69,0,479" x:Name="image1" Stretch="Fill" Width="480" Source="/myNameSpace;component/home_003.jpg" />
</ControlTemplate>
</Button.Template>
</Button>
in this .cs file:
JsonObject jsonObject = (JsonObject)JsonObject.Load(e.Result);
ads_address = jsonObject["imageurl"];//get a url from jsonobject
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri(ads_address));//ads url likes //"http://27.98.194.93/forum/images/2009/home_004.jpg";
this.img_btn.Background = imageBrush;//this code is not work,perhaps, I can't get what I want(Image) with code "this.img_btn.Background"
how can I get this Image in Button.If can't what's the way to set a button background with a url in code;
try this
Create image source at first and then giving that source to the image control you are using.
string imagepath = "url";
ImageSource imgsrc1 = new BitmapImage(new Uri(imagepath, UriKind.RelativeOrAbsolute));
//image can be Image/ImageBrush
image.Source = imgsrc1;

implementing the Bing maps in Windows phone 7

I am new to the Windows phone 7, Please help me
<phone:PhoneApplicationPage
x:Class="Sample1.PanoramaPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps">
<my:Map x:Name="map1" CredentialsProvider="{Binding CredentialsProvider}" Height="462" HorizontalAlignment="Left" Margin="6,6,0,0" VerticalAlignment="Top" Width="444" >
<my:MapItemsControl x:Name="mapItemsControl" ItemsSource="{Binding Path=Locations}">
<my:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin MouseLeftButtonUp="Pushpin_MouseLeftButtonUp" Background="Red" Location="{Binding}">
</m:Pushpin>
</DataTemplate>
</my:MapItemsControl.ItemTemplate>
</my:MapItemsControl>
</my:Map>
And my .xaml.cs is like this:
public PanoramaPage1()
{
InitializeComponent();
//map1.Mode = new RoadMode();
Pushpin pushpin = new Pushpin();
Location location = new Location();
location.Latitude = 53.550556;
location.Longitude = 9.993333;
pushpin.Location = location;
pushpin.Background = new SolidColorBrush(Colors.Red);
map1.Children.Add(pushpin);
}
if we see i have two(2) map control are added to the page those are
xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
if i use the map of the Microsoft.Maps.MapControl pushpin is working but the below code is not working.
<m:Map.Mode>
<m:AerialMode ShouldDisplayLabels="True" />
</m:Map.Mode>
it is giving error as "The property 'ShouldDisplayLabels' was not found in type 'AerialMode'."
If i use map of the Microsoft.Phone.Controls.Maps then Pushpin is not working means pushpin staying stable when we are moving the map(map is moving but pushpin is staying satble). And also if add the two pushpins like below:
public PanoramaPage1()
{
InitializeComponent();
//map1.Mode = new RoadMode();
GeoCoordinate lHamburg = new GeoCoordinate(53.550556, 9.993333);
Pushpin pushpin = new Pushpin();
Location location = new Location();
location.Latitude = 53.550556;
location.Longitude = 9.993333;
pushpin.Location = location;
pushpin.Background = new SolidColorBrush(Colors.Red);
map1.Children.Add(pushpin);
pushpin = new Pushpin();
location = new Location();
location.Latitude = 83.550556;
location.Longitude = 9.993333;
pushpin.Location = location;
pushpin.Background = new SolidColorBrush(Colors.Yellow);
map1.Children.Add(pushpin);
}
only second pushpin(Colors.Yellow) i am able to see on the map.
Please help me out.
You have two instances with the names 'pushpin'

view gif image in image UI control windows phone 7

I want to display the gif image in the UI image control.
I have Image image1;
image1.source = new BitmapImage(new Uri(link, UriKind.Absolute));
but the link in Uri is a .gif image.
I have read this: imagetool however I still not get it how to use the library. I did download the library and add references, then from that I'm stuck, I want to set source in code.
Can you help explains it a little bit more?
My code currently like this:
<UserControl.Resources>
<imagetools:ImageConverter x:Key="ImageConverter" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid HorizontalAlignment="Right" Width="69">
<Border BorderBrush="White" BorderThickness="3" CornerRadius="7" Background="Black">
<Image Width="69" Height="69" Name="canvasImage" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" ImageFailed="canvasImage_ImageFailed" />
</Border>
<Border BorderBrush="White" BorderThickness="3" CornerRadius="7" Background="Black">
<imagetools:AnimatedImage Name="canvasGifImage" Width="69" Height="69" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
</Grid>
In my MainPage.xaml.cs, because I don't know whether it is an png/jpg or a gif, so I have it try to load png/jpg first, if failed then try load gif in the imagetools control name canvasGifImage:
private void DisplayImage(int index, string link)
{
try
{
control1.canvasImage.Source = new BitmapImage(new Uri(link, UriKind.Absolute));
}
catch //if fail to load image as normal, do this
{
//but I dont know how to set Source for the canvasGifImage, help me here:
control1.canvasGifImage.Source = *new BitmapImage(new Uri(link, UriKind.Absolute));*
}
}
Replace the use of the ManualResetEvent for async code.
using (var resetEvent = new ManualResetEvent(false))
{
ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
var extendedImage = new ExtendedImage();
extendedImage.LoadingCompleted += (s, e) => resetEvent.Set();
extendedImage.LoadingFailed += (s, e) => resetEvent.Set();
extendedImage.SetSource(gifStream);
resetEvent.WaitOne(TimeSpan.FromSeconds(5));
// Check for timeout or error
var enc = new JpegEncoder();
var jpegStream = new MemoryStream();
enc.Encode(extendedImage, jpegStream);
...
}

Resources