Develop Reference

WPF - Problem with displaying an Image with BitmapImage as a source

I have always been using MVVM model when creating applications with WPF and everything connected with displaying/modifying Bitmaps worked well, however this time I have decide to choose other way as I want to adjust Bitmap width and height to the control that should contain it, but something doesn't work here.
I use an event that is executed on Load as I want to get the actual height and width as said before.
Part of my code:
private BitmapImage scene;
public BitmapImage Scene
{
get { return scene; }
set { if (scene != value) { scene = value; RaisePropertyChanged("Scene"); } }
}
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
LoadSceneCommand = new RelayCommand(LoadScene);
GenerateTexturedCylinderCommand = new RelayCommand(GenerateTexturedCylinder);
GenerateTexturedSphereCommand = new RelayCommand(GenerateTexturedSphere);
GenerateCylinderShadingCommand = new RelayCommand(GenerateCylinderShading);
GenerateSphereShadingCommand = new RelayCommand(GenerateSphereShading);
}
private void GetSceneSize(object sender, RoutedEventArgs e)
{
object wantedNode = (Grid)this.FindName("SceneGrid");
if (wantedNode is Grid)
{
Grid imageControl = wantedNode as Grid;
sceneWidth = (int)imageControl.ActualWidth;
sceneHeight = (int)imageControl.ActualHeight;
try
{
PrepareScene();
}
catch(Exception ex)
{
MessageBox.Show(ex.Message);
}
}
}
private void PrepareScene()
{
Bitmap bitmap = new Bitmap(sceneWidth, sceneHeight);
for (int x = 0; x < sceneWidth; ++x)
for (int y = 0; y < sceneHeight; ++y)
bitmap.SetPixel(x, y, Color.Black);
Scene = ImageConverters.Bitmap2BitmapImage(bitmap);
}
Xaml:
<Window x:Class="_3DRendering.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Loaded="GetSceneSize"
ResizeMode="NoResize"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="*"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1" x:Name="SceneGrid">
<Image Source="{Binding Scene}" x:Name="ImageControl"/>
</Grid>
<ScrollViewer Grid.Column="3" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel>
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="0 10 0 0"/>
<Setter Property="Padding" Value="5 5 5 5"/>
</Style>
</StackPanel.Resources>
<Button Content="Textured cylinder" Command="{Binding GenerateTexturedCylinderCommand}"/>
<Button Content="Textured sphere" Command="{Binding GenerateTexturedSphereCommand}"/>
<Button Content="Cylinder shading" Command="{Binding GenerateCylinderShadingCommand}"/>
<Button Content="Sphere shading" Command="{Binding GenerateSphereShadingCommand}"/>
<Button Content="Load Scene" Command="{Binding LoadSceneCommand}"/>
<Button Content="Save Scene" Command="{Binding }"/>
</StackPanel>
</ScrollViewer>
</Grid>
As you can see I try to make the whole Bitmap black. Unfortunately the result that I get is that nothing is displayed. It is just a blank white space in the place where my Bitmap should be shown.

how to create a loading page after a button event in wp8 xaml C#

hi i need to how can i make a overlay like page in xaml for windows phone ? Like, if i tap a button it will show a overlay like message loading... and then actually start to work. All i have been able to create a popup in xaml.
<Popup x:Name="myPopup" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Grid >
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock FontSize="25" Grid.Column="1" Margin="20" Text="loading"/>
</Grid>
</Popup>
Can you plz tell me how can make overlay like message ?

If you need and overlay there it is.
First you need an usercontrol.
<UserControl x:Class="ABC.Test.OverLay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
d:DesignHeight="800" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="400"/>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1">
<ProgressBar IsIndeterminate="True" Foreground="Red" Height="80" Width="480" VerticalAlignment="Center"/>
<TextBlock Text="loading" Foreground="Red" HorizontalAlignment="Center" FontSize="20"/>
</StackPanel>
</Grid>
In Codebehind :
public OverLay()
{
InitializeComponent();
this.LayoutRoot.Height = Application.Current.Host.Content.ActualHeight;
this.LayoutRoot.Width = Application.Current.Host.Content.ActualWidth;
SystemTray.IsVisible = false;
}
In the page where you would show the overlay, create an instance of popup just like this:
private Popup popup;
Initialize it after InitializeComponent(),like this :
this.popup = new Popup();
on the event where you need the overlay to show up, try like this :
this.LayoutRoot.Opacity = 0.2;
OverLay _ovr = new OverLay();
this.popup.Child = _ovr;
this.popup.IsOpen = true;
BackgroundWorker _worker = new BackgroundWorker();
_worker.DoWork += (s, a) =>
{
//you can do your work here.
Thread.Sleep(3000);
};
_worker.RunWorkerCompleted += (s, a) =>
{
popup.IsOpen = false;
this.LayoutRoot.Opacity = 1.0;
};
_worker.RunWorkerAsync();
Find the working Here on Nokia Developers community

Shapes doesn't show on canvas when drawn programmatically

I'm trying to crate simple app for my Windows Phone device where I can programmatically draw some shapes on canvas. When I write code to define shape in xaml everything looks great but when I try to draw same shape in code, nothing shows on canvas.
Xaml code
<phone:PhoneApplicationPage
x:Class="TestApp.ResultPage"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="TestApp" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Margin="14,10,10,86" Grid.Row="1">
<Canvas x:Name="resultCanvas" Margin="10,10,10,0" Background="White" MaxHeight="590" VerticalAlignment="Center" Height="590" Width="436" MaxWidth="436" HorizontalAlignment="Center">
<Canvas.Clip>
<RectangleGeometry Rect="0, 0, 436, 590"/>
</Canvas.Clip>
</Canvas>
</Grid>
<Button x:Name="drawButton" Content="Return" HorizontalAlignment="Left" Margin="14,615,0,0" Grid.Row="1" VerticalAlignment="Top" Height="81" Width="456" Click="drawButton_Click"/>
</Grid>
C# code for drawing line
public void Draw()
{
Line line = new Line()
{
StrokeThickness = 2,
Stroke = new SolidColorBrush(Colors.Blue),
X1 = 100,
X2 = 200,
Y1 = 100,
Y2 = 200,
};
resultCanvas.Children.Add(line);
}
private void drawButton_Click(object sender, RoutedEventArgs e)
{
Draw();
}

Dynamically adding contents to stackpanel in code behind

Am trying to add Set of labels and images in a stackpanel in code behind.And finally am attaching that stackpanel to particular column of a grid control.My expected output should be like
<image><label>
combination
but my output is like it displays the label in first column of grid and the image in the next column.(I was not able to add the snapshots since i dont have enough reputations)
XAML code
<Window x:Class="Ping.MainWindow" WindowStyle="ThreeDBorderWindow" Icon="F:\ChatApplication\Ping\Ping\Images\title.ico" Cursor="Pen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ping - Connected by alphabets" Height="450" Width="750" WindowStartupLocation="CenterScreen" SizeToContent="WidthAndHeight" >
<Grid Name="grid_window">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<TabControl Grid.ColumnSpan="2" Name="tab_control" BorderBrush="Cornsilk" BorderThickness="4" HorizontalAlignment="Left" Height="419" Margin="227,0,0,0" VerticalAlignment="Top" Width="515">
<TabItem Header="Home" BorderBrush="Green"/>
</TabControl>
</Grid>
code behind
public MainWindow()
{
InitializeComponent();
DBCoding dbobj = new DBCoding();
//Contains names {"Dhivi","Walle"}
List<string> online = new List<string>();
online = dbobj.onlineUsers();
StackPanel myStackPanel = new StackPanel();
myStackPanel.Orientation = Orientation.Vertical;
foreach (var item in online)
{
Image myImage = new Image();
myImage.Source = new BitmapImage(new Uri("F:\\ChatApplication\\Ping\\Ping\\Images\\visible.png"));
myImage.Width = 10;
myImage.Height = 10;
//myImage.Margin = new Thickness(-10,0,-80,0);
myImage.Height = 10;
Label user = new Label();
user.Content = item.ToString();
myStackPanel.Children.Add(myImage);
myStackPanel.Children.Add(user);
}
grid_window.Children.Add(myStackPanel);
Grid.SetColumnSpan(myStackPanel, 1);
Grid.SetColumn(myStackPanel, 0);
}
Can anybody tell me the solution.

Here's how your code should look like, using data binding, an ItemsControl and a DataTemplate:
XAML
<Window x:Class="Ping.MainWindow" WindowStyle="ThreeDBorderWindow" Icon="F:\ChatApplication\Ping\Ping\Images\title.ico" Cursor="Pen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ping - Connected by alphabets" Height="450" Width="750" WindowStartupLocation="CenterScreen" SizeToContent="WidthAndHeight" >
<Grid Name="grid_window">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<TabControl Grid.ColumnSpan="2" Name="tab_control" BorderBrush="Cornsilk" BorderThickness="4" HorizontalAlignment="Left" Height="419" Margin="227,0,0,0" VerticalAlignment="Top" Width="515">
<TabItem Header="Home" BorderBrush="Green"/>
</TabControl>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel>
<!-- You really should add the image as a resource to the project -->
<Image Source="F:\ChatApplication\Ping\Ping\Images\visible.png"
Width="10" Height="10" />
<TextBlock Text="{Binding}" />
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
C#
public MainWindow()
{
InitializeComponent();
DBCoding dbobj = new DBCoding();
List<string> online = dbobj.onlineUsers();
DataContext = online;
}

How to override MeasureOverride to find the size of ItemsControl

I am developing a UserControl that consists of a block with a heading and a list of items (as ItemsControl). The usercontrol is added dynamically to a canvas. I need to get the actual size of the control (including space taken by ItemsControl) before it gets rendered. I tried overriding MeasureOverride method of the UserControl hoping that the size would be reflected in DesiredSize property. But it is not working.
The XAML is:
<UserControl x:Class="MyTools.MyControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid x:Name="LayoutRoot" Background="White">
<Border Name="MainBorder" CornerRadius="5" BorderThickness="2" BorderBrush="Black">
<Grid Name="grid1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="34" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Name="titleGrid" Grid.Row="0" Background="#FF727272">
<TextBlock Name="titleText" HorizontalAlignment="Center" Text="{Binding ControlName}" VerticalAlignment="Center" FontSize="13" FontWeight="Bold" Foreground="Beige" />
</Grid>
<Grid Name="gridpr" Grid.Row="1" Background="#12C48F35">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Name="borderPr" CornerRadius="3" Margin="10" BorderThickness="1" BorderBrush="LightGray" Grid.Row="0">
<Grid Name="gridPr" Background="#FFC1C1C1" MouseLeftButtonUp="gridPr_MouseLeftButtonUp">
<StackPanel>
<TextBlock HorizontalAlignment="Center" Name="txtPr" Text="SubItems" VerticalAlignment="Center" Foreground="#FF584848" FontSize="12" />
<ItemsControl x:Name="pitems" ItemsSource="{Binding MyItems}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="15,0,0,0">
<TextBlock Text="{Binding MyVal}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</Border>
</Grid>
</Grid>
</Border>
</Grid>
</UserControl>
I am overriding MeasureOverride of the UserControl as shown below:
namespace MyTools
{
public partial class MyControl : UserControl
{
public MyControl()
{
InitializeComponent();
}
public string ControlName { get; set; }
public object MyItems { get; set; }
public class Row
{
public string MyVal { get; set; }
}
protected override Size MeasureOverride(Size availableSize)
{
var desiredSize = base.MeasureOverride(availableSize);
var sideLength = Math.Min(desiredSize.Width, desiredSize.Height);
desiredSize.Width = sideLength;
desiredSize.Height = sideLength;
return desiredSize;
}
}
}
Client Code:
MyControl control1 = new MyControl();
control1.ControlName = "Test Name";
var test = new List<MyControl.Row>(
new MyControl.Row[]
{
new MyControl.Row {MyVal = "Item1"},
new MyControl.Row {MyVal = "Item2"},
new MyControl.Row {MyVal = "Item3"}
});
control1.MyItems = test;
control1.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
MessageBox.Show(control1.DesiredSize.Height.ToString());
canvas1.Children.Add(control1);
I am not getting the actual size using the DesiredSize.Height property from the client. Any idea on how to fix this?

Is your user control defined to change in height to reflect the size of the contents? By default your user control will be a fixed size and not change in height just because the items control has more entries.
I think you need to add your user control inside a grid before then measuring the grid. This is how I measure controls and it seems to work well, even when measuring the control directly does not work as in your case...
MyControl control1 = new MyControl();
... your setup code for control1...
Dim containerGrid As New Grid
containerGrid.Children.Add(control1)
containerGrid.Measure(New Size(Double.MaxValue, Double.MaxValue))
containerGrid.Arrange(New Rect(0, 0, Double.MaxValue, Double.MaxValue))
...now check the grid.ActualWidth and grid.ActualHeight

Try using ActualWidth and ActualHeight properties.
protected override Size MeasureOverride(Size availableSize)
{
var desiredSize = new Size();
var sideLength = Math.Min(ActualWidth, ActualHeight);
desiredSize.Width = sideLength;
desiredSize.Height = sideLength;
return desiredSize;
}