Develop Reference

Drawing a stretchable Line in WPF

I need to draw a line which stretch when its parent container stretch itself and it collapse when its parents collapse itself.
I develop a user control for this purpose and this control is placed in scroll viewer for some reasons.
I have binded the X2 Property of the line with the width of parent control. It solves the problem while stretching the parent control but while collapsing it is not letting the control decrease its size and scrollviewer adds a scrollbar for it.
Binding binding = new Binding("ActualWidth")
{
ElementName = Grid1.Name
};
Line mainLine = new Line
{
X1 = 0,
HorizontalAlignment=System.Windows.HorizontalAlignment.Stretch,
StrokeThickness = 2,
VerticalAlignment = VerticalAlignment.Center
};
BindingOperations.SetBinding(mainLine, Line.X2Property, binding);
Grid1.Children.Add(mainLine);
Grid.SetColumnSpan(mainLine, 4);

Try using a Rectangle to do that:
<Grid>
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Fill="Black"
Height="2"/>
</Grid>

Creating Image Dynamically

I am having a problem while making a Whack a Mole type game, I am trying to create the images where the mole will appear dynamically, yet there is only a blank white screen where the stack panel is. It is fair to say that I am a noob.
This is my loop where I am trying to create these images:
Image[] ImageArray = new Image[50];
InitializeComponent();
//string ImageName = "Image";
for (int i = 0; i <= 8; i++)
{
Image Image = new Image();
ImageArray[i] = Image;
Image.Name = "Image" + i.ToString();
StackPanel1.Children.Add(ImageArray[i]);
}
//Random Number Generator
Random rnd = new Random();
int num = rnd.Next(1, 9);
//If Random Number is "1" Then Image will display
if (num == 1)
{
ImageSource MoleImage = new BitmapImage(new Uri(ImgNameMole));
ImageArray[1].Source = MoleImage;
}
This is the StackPanel XAML:
<Window x:Name="Window1" x:Class="WhackaMole.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="468.843" Width="666.045" OpacityMask="#FFF70D0D" Icon="mole2.png" Cursor="" >
<Grid OpacityMask="#FF5D1313">
<Image Margin="422,191,-185,-69" Source="mole2.png" Stretch="Fill" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<TextBlock HorizontalAlignment="Left" Margin="35,31,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="52" Width="595" FontSize="50" FontFamily="SimHei"><Run Language="en-ca" Text="Can You Catch the Mole?"/></TextBlock>
<Button x:Name="NewGameBttn" Content="New Game" HorizontalAlignment="Left" Margin="77,0,0,16" VerticalAlignment="Bottom" Width="139" Height="50" FontSize="25" Click="NewGameBttn_Click"/>
<Button x:Name="CloseBttn" Content="Close" HorizontalAlignment="Left" Margin="245,365,0,0" VerticalAlignment="Top" Width="76" Height="50" FontSize="29" Click="CloseBttn_Click"/>
<StackPanel x:Name="StackPanel1" HorizontalAlignment="Left" Height="231" Margin="35,112,0,0" VerticalAlignment="Top" Width="525"/>
</Grid>
</Window>

As far as I can tell you're creating a new object of type Image but that Image really doesn't have anything to display. You need to set the Source of your Image. Here's an example stolen from MSDN.
Image myImage = new Image();
myImage.Source = new BitmapImage(new Uri("myPicture.jpg", UriKind.RelativeOrAbsolute));
LayoutRoot.Children.Add(myImage);
As townsean pointed out, you should probably create a Style for your Image where you can set common properties such as Height, Width etc.

My guess is that since you are adding the items to a StackPanel, the StackPanel is choosing the default mins for height and width on the image (which is probably 0), and that is why you are not seeing anything.
Try setting a value for the Height and Width of the image and see if anything shows.
Also, as Tejas pointed out you are not setting the image source.
EDIT: Set the Image width like this:
Image myImage = new Image();
myImage.Width = 25;
myImage.Height = 25;
Do something like this in your for-loop where you first create the images.

How can I create a tiled image in code that is also data-bound?

Current in code-behind, I dynamically create a WPF Image control and bind the source to a custom databinding. This will eventually be added to a grid to provide a background image:
Image myImage = new Image();
myImage.Stretch = Stretch.UniformToFill;
myImage.SetBinding(Image.SourceProperty, myBinding);
The problem is that I want to tile this image, so the only way I can find to do this is to create an ImageBrush and set the TileMode property. But there is no "SetBinding" function, so how can I accomplish what I need?
ImageBrush myBrush = new ImageBrush();
myBrush.TileMode = TileMode.Tile;
// Can't do this!
myBrush.SetBinding(ImageBrush.SourceImageProperty, myBinding);
Are there any other ways to tile an image like this in code-behind?

You need not to change anything but use the BindingOperations:
BindingOperations.SetBinding(myBrush, ImageBrush.ImageSourceProperty, myBinding);
And you need to define the Viewport and the fill the viewport with brush:
MyBrush.Viewport = new Rect(0, 0, 0.1, 0.1);
// Create a rectangle and paint it with the ImageBrush.
Rectangle rec = new Rectangle();
rec.Stroke = Brushes.LimeGreen;
rec.StrokeThickness = 1;
rec.Fill = MyBrush;

I've tried the following. In debugmode the property of the VisualBrush is set correctly. Certainly the image is show as a stretched image. Don't know why. Hope it helps.
the property
public TileMode Mode { get; set; }
the binding
VisualBrush myBrush = new VisualBrush();
Uri uri = new Uri("picture.png", UriKind.RelativeOrAbsolute);
ImageSource src = new BitmapImage(uri);
myBrush.Visual = new Image() { Source = src };
this.Mode = TileMode.Tile;
Binding bind = new Binding() { Source = Mode };
BindingOperations.SetBinding(myBrush, VisualBrush.TileModeProperty, bind);
this.Background = myBrush;

I don't like code behind, so it's hard to me to write code-behind sample quickly.
Here's markup sample:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.Background>
<ImageBrush ImageSource="Sample.jpg" TileMode="Tile" Viewport="0,0,0.5,0.5"/>
</Grid.Background>
</Grid>
Instead of hard-coded image (ImageSource="Sample.jpg") you can write any binding expression like this: ImageSource="{Binding MyBackgroundImageUri}".

Get the item index which is on focus inside a stackpanel

I have added 10 images in a stackpanel horizontally which is inside a scrollviewer. When user swipe the page the scrollviewer stops at certain position, if the scroll stops at &th image i want to get the name of the image. How to get that?
for (int i = 0; i <= 59; i++)
{
Uri uri = new Uri("http://d1mu9ule1cy7bp.cloudfront.net/2012/media/catalogues/47/pages/p_" + i + "/thump.jpg");
ImageSource img1 = new BitmapImage(uri);
Image rect = new Image { RenderTransform = new TranslateTransform() };
rect.Source = img1;
stack.Children.Add(rect);
}
XAML:
<ScrollViewer HorizontalContentAlignment="Left" HorizontalAlignment="Left" Name="scroll" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">
<StackPanel Name="stack" Width="Auto" Orientation="Horizontal" HorizontalAlignment="Left" >
</StackPanel>
</ScrollViewer>

Assuming that your images are all the same size, you could calculate this by looking at the HorizontalOffset of the ScrollViewer.

Border around image in c#

How to have a black border around image in c#.the image exists inside a wrap panel

Just add a border to the Image:
<toolkit:WrapPanel x:Name="wp">
<Border BorderBrush="Black" BorderThickness="5" >
<Image Source="myimage.png" />
</Border>
</toolkit:WrapPanel>
Or add it to the WrapPanel in code:
var b = new Border
{
BorderBrush = new SolidColorBrush(Colors.Black),
BorderThickness = new Thickness(5)
};
var bi = new BitmapImage
{
UriSource = new Uri("/myimage.png", UriKind.Relative)
};
b.Child = new Image {Source = bi};
wp.Children.Add(b);

Use a border element and configure it and set the background to a imagebrush with your image as source.
Here´s some XAML:
<Border BorderBrush="Black">
<Border.Background>
<ImageBrush ImageSource="<Your Image>"/>
</Border.Background>
</Border>
You can also define a CornerRadius on the Border to make rounded corners. This will also apply to the image.