We Keep Coding

Problem with loading picture from website to WPF Image using URL

I've made a snake game. As in the title - I've tried to load a picture from website to the source of WPF Image using URL. My goal was to load a random picture from website as a bitmap every time the snake collects the food on the map, but the most important thing was that it shouldn't be loaded when the program executes, but after the snake collects the food. So I've created a string array, where I placed 5 url links to the pictures from the website and then I wanted to use Random() to choose a random link to the picture and place it to the source of WPF Image. But when the snake collects the food, nothing happens. And my question is: is my code wrong? Here's my code:
XAML CODE
<Window x:Class="Snake_Game.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"
xmlns:local="clr-namespace:Snake_Game"
mc:Ignorable="d"
Title="Snake The Game"
SizeToContent="WidthAndHeight"
ContentRendered="Window_ContentRendered"
KeyUp="Window_KeyUp">
<Border BorderBrush="Black" BorderThickness="8">
<Canvas Name="GameBoard"
ClipToBounds="True"
Background="Black"
Height="1000"
Width="1000">
<Rectangle x:Name="ScoreBoard"
Fill="#FF7B2D96"
Height="1000"
Canvas.Left="706"
Stroke="Black"
Width="294"/>
<Label x:Name="PointsPanel"
Content="POINTS"
Canvas.Left="804"
Canvas.Top="27"
Height="29"
Width="95"
FontWeight="Bold"
FontSize="14"
Background="#FFE72626"/>
<Image x:Name="ImagePanel"
Height="355"
Canvas.Left="724"
Canvas.Top="272"
Width="266"
Stretch="UniformToFill"
RenderOptions.BitmapScalingMode="Fant"
StretchDirection="DownOnly"
MaxHeight="355"
MaxWidth="266">
<Image.OpacityMask>
<ImageBrush/>
</Image.OpacityMask>
</Image>
<Label x:Name="Score"
Content=""
Canvas.Left="804"
Canvas.Top="61"
Height="50"
Width="95"
FontWeight="Bold"
FontSize="36"
FontFamily="SimSun"/>
</Canvas>
</Border>
</Window>
Method used to load a random picture (from string array):
private void GetRandomImage()
{
string[] images =
{
"http://cdn.pixabay.com/photo/2015/02/28/15/25/snake-653639_1280.jpg",
"http://cdn.pixabay.com/photo/2014/12/25/14/54/snake-579682_1280.jpg",
"http://cdn.pixabay.com/photo/2015/02/28/15/25/rattlesnake-653642_1280.jpg",
"http://cdn.pixabay.com/photo/2012/10/10/05/07/grass-snake-60546_1280.jpg",
"http://cdn.pixabay.com/photo/2010/12/14/16/46/snake-3237_1280.jpg"
};
BitmapImage bitmapImage = new BitmapImage(new Uri(images[rnd.Next(images.Length)]));
ImagePanel.Source = bitmapImage;
}

Just remove OpacityMask. You do not set ImageSource of ImageBrush, so there is no reason to have OpacityMask.
<Border BorderBrush="Black" BorderThickness="8">
<Canvas Name="GameBoard" ClipToBounds="True" Background="Black" Height="1000" Width="1000"
>
<Rectangle x:Name="ScoreBoard" Fill="#FF7B2D96" Height="1000" Canvas.Left="706" Stroke="Black" Width="294"/>
<Label x:Name="PointsPanel" Content=" POINTS" Canvas.Left="804" Canvas.Top="27" Height="29" Width="95" FontWeight="Bold" FontSize="14" Background="#FFE72626"/>
<Image x:Name="ImagePanel" Height="355" Canvas.Left="724" Canvas.Top="272" Width="266" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="Fant" StretchDirection="DownOnly" MaxHeight="355"
MaxWidth="266">
</Image>
<Label x:Name="Score" Content="" Canvas.Left="804" Canvas.Top="61" Height="50" Width="95" FontWeight="Bold" FontSize="36" FontFamily="SimSun"/>
</Canvas>
</Border>

How to retrieve an element from ItemsControl c# and Xaml?

I am creating a simple game for windows store using c# and xaml.
I want to change the colour of a rectangle when clicked.
I tried different method of conversion from sender object but I was unable to fix the bug. Please help me out. I have "onTapped" event for ItemsControl.
Xaml File :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ItemsControl Grid.Row="1" x:Name="rectangleItems" Tapped="RectTapped">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid x:Name="myWrapGrid" Height="400"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- The sequence children appear depends on their order in
the panel's children, not necessarily on where they render
on the screen. Be sure to arrange your child elements in
the order you want them to transition into view. -->
<ItemsControl.Items >
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
</ItemsControl.Items>
</ItemsControl>
</Grid>
This is the code for ItemsControl event.
private void RectTapped(object sender, TappedRoutedEventArgs e)
{
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Color.FromArgb(255, 0, 255, 0);
Rectangle uiElement = (Rectangle)rectangleItems.ContainerFromIndex(1);
Rectangle rc = (Rectangle)uiElement;
rc.Fill = mySolidColorBrush;
}
In this case I have manually specified the element of index 1 but I would like to change the colour of the rectangle that was clicked.
Thanks.

You should bind event to Rectangles, not the ItemControl, and then use sender object of the event as Rectangle to change it's properties:
private void RectEvent(object sender,EventArgs args)
{
var rectangle = sender as Rectangle;
//rest of your code
}
In order to bind event to your rectangles you can iterate thought the "rectangleItems" collection that you have in your code.
If binding such event is not an option, then you can use GetPosition method from TappedRoutedEventArgs (see documentation here) and then search for your rectangle by this value.

Moving controls to another groupbox during runtime in wpf

I have two groupboxes. GroupBox1 and GroupBox2. Is it possible to move controls inside GroupBox1 to GroupBox2 during runtime ?
For example in the following xaml file if I want to move the label1 in GroupBox1 to GroupBox2 during run time. How should I do it ?
<Grid>
<GroupBox Name="GroupBox1" HorizontalAlignment="Left" Height="400" VerticalAlignment="Top" Width="330" >
<StackPanel Orientation="Horizontal">
<Label Content="MyContent" x:Name="label1" FontSize="16"/>
<Image Name="ImageName1" VerticalAlignment="Bottom" Width="62" Height="42"/>
</StackPanel>
</Groupbox>
<GroupBox Name="GroupBox2" HorizontalAlignment="Left" Height="400" VerticalAlignment="Top" Width="330" >
<StackPanel Orientation="Horizontal">
<Label Content="MyContent" x:Name="label2" />
<Image Name="ImageName2" VerticalAlignment="Bottom" Width="62" Height="42"/>
</StackPanel>
</Groupbox>
</Grid>
Note :
I do know that I can transform the position of controls during run time by changing their margin value like this:
test.Margin = new Thickness(0, -5, 0, 0);

Just remove it from one StackPanel and put into another.
stackpanel1.Children.RemoveAt(stackpanel1.Children.IndexOf(label1));
stackpanel2.Children.Add(label1);

WPF Window - Fade Different parts of the same window

I have a basic WPF windows with the markup as specific below:
<Window x:Class="Application.SomeWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SomeWindow"
Topmost="True" WindowStyle="None" Height="39" Width="400"
ResizeMode="NoResize" ShowInTaskbar="False"
WindowStartupLocation="Manual" Background="Transparent"
Closing="Window_Closing" AllowsTransparency="True" Opacity="0">
<Border Background="CornflowerBlue" BorderBrush="Black" BorderThickness="0,0,0,0" CornerRadius="5,5,5,5" Opacity="0.75">
<Grid>
<!-- Display bar -->
<Image Grid.Row="1" Height="24" Margin="7,7,0,0" Name="img1" Stretch="Fill" VerticalAlignment="Top" Source="/Application;component/Images/dashboard/1.png" HorizontalAlignment="Left" Width="13" />
<Image Height="24" Margin="19,7,47,0" Name="image21" Source="/Application;component/Images/dashboard/2.png" Stretch="Fill" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2" />
<!-- Button 1 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,25,0" Name="btn1" Click="btn1_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="1">
<Image Height="26" HorizontalAlignment="Right" Name="img1" Source="/Application;component/Images/dashboard/3.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
<!-- Button 2 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,5,0" Name="btn2" Click="btn2_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="2">
<Image Height="26" HorizontalAlignment="Right" Name="img2" Source="/Application;component/Images/dashboard/4.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
</Grid>
</Border>
</Window>
Here is what it looks like now:
What I'd really like to do is make it so that initially looks like this:
Then, once mouseover happens, to fade background opacity in from 0 so it looks like the first image. The problem is that if I set the Border or Grid Background color to Transparent with the goal of fading in on mouseover, then everything inside the Border or Grid is affected as well.
Is there a way to manage the opacities of window and its UI elements seperately? Or perhaps there is a totally different route to take to get this background fade on mouseover? Thanks.

There are two options. Number one is to just move the outer border inside the grid, as the first child (and have the other controls alongside it, not in it). That way it will fade by itself, but still be behind the other controls. You will of course either have to set ColumnSpan/RowSpan, or wrap the entire thing in another Grid.
The second option is to just fade the background, not the entire border:
<Border ...>
<Border.Background>
<SolidColorBrush Color="CornflowerBlue" Opacity="0.5"/>
</Border.Background>
...

try this trick - draw a rectangle or border with dimensions bind to parent or ElementName.
It won't affect rest of elements of tree. Works for me.
<Grid x:Name="abc">
<Border
Width="{Binding ActualWidth, ElementName=abc}"
Height="{Binding ActualHeight, ElementName=abc}"
Background="Blue"
Opacity="0.5"/>
//buttons or inner grid
...
</Grid>
If you don'w want to use ElementName, simply replace Width and Height by
Width="{Binding ActualWidth, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
Height="{Binding ActualHeight, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"

Wpf UserControl Width and Height Not Taknig

I have a user control that is just a box with text like this:
<Border x:Name="box"
BorderThickness="0"
BorderBrush="Black"
Background="Black"
Width="200" Height="200">
<Label Content="Hello World"
Height="65" Width="400"
Foreground="White" FontSize="32"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" />
</Border>
When I create and instance of it in my MainWindow like this...
<local:MyBoxControl Width="1000" Height="1000"/>
the width and height is 200x200 as defined in the Border when I'd like it to be 1000x1000 as provided when I create it.

Just remove the Width and Height from the Border element.

Would it be acceptable for you to set the HorizontalAlignment and VerticalAlignment of the Border to Stretch?

Assuming you need the width/height of the border to remain at 200 (otherwise you just wouldn't specify it) you can make a grid the outermost element of the control and put the border inside it. Then if you don't define a width/height on that it will auto-adjust to the size of your control.
<Grid>
<Border x:Name="box"
BorderThickness="0"
BorderBrush="Black"
Background="Black"
Width="200" Height="200">
<Label Content="Hello World"
Height="65" Width="400"
Foreground="White" FontSize="32"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" />
</Border>
</Grid>