I'm trying to generate some UI Elements dynamically. The whole thing works, except it seems like the textblocks are invisible.
Grid pGrid = this.createPodiumGrid();
//create textblocks etc
TextBlock bTijd = new TextBlock();
bTijd.Text = currentGig.BeginTijd;
bTijd.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
bTijd.Foreground = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
Grid.SetColumn(bTijd, 0);
Grid.SetRow(bTijd, 0);
pGrid.Children.Add(bTijd);
TextBlock pName = new TextBlock();
pName.Text = currentGig.Podium.Naam;
pName.Margin = new Thickness(20, 0, 0, 0);
pName.Foreground = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
Grid.SetColumn(pName, 1);
Grid.SetRow(pName, 0);
pGrid.Children.Add(pName);
Image favImg = new Image();
favImg.Source = new BitmapImage(new Uri("/Images/thumb.png", UriKind.RelativeOrAbsolute));
favImg.Width = 50;
favImg.Height = 50;
favImg.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
Grid.SetColumn(favImg, 2);
Grid.SetRow(favImg, 0);
pGrid.Children.Add(favImg);
podiumStackPanel.Children.Add(pGrid);
The last image, does show on the right location. Am I missing something here? Text color is black on a white background. But I can't see the text. I'm 100% positive that the value is filled.
Change your code to the following:
bTijd.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
You have set the color to transparent by adding the first '0'.
pName.Foreground = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
The first parameter of Color.FromArgb is the alpha channel. That is, the opacity. And you're setting it to 0, which explains why the TextBlock is invisible. Just set it to 255 instead:
pName.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
Or use the Colors enumeration:
pName.Foreground = new SolidColorBrush(Colors.Black);
You have made their Foreground transparent by setting a zero alpha value in Color.FromArgb.
Set the Foreground to Colors.Black instead, e.g.
bTijd.Foreground = new SolidColorBrush(Colors.Black);
or of course
bTijd.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
Related
I'm trying to combine two rectangles that I need to create dynamically but I can't figure out how to draw them using .Data and I don't know how to convert from Windows.Shapes.Rectangle to Windows.Media.Geometry.
Rectangle Cross1 = new Rectangle();
Cross1.Margin = new Thickness(465, -140, 0, 0);
Cross1.Height = 110;
Cross1.Width = 15;
Cross1.RenderTransform = rotateTransform1;
Rectangle Cross2 = new Rectangle();
Cross2.HorizontalAlignment = HorizontalAlignment.Left;
Cross2.VerticalAlignment = VerticalAlignment.Top;
Cross2.Margin = new Thickness(362, -103, 0, 0);
Cross2.Height = 110;
Cross2.Width = 15;
Cross2.RenderTransform = rotateTransform2;
CombinedGeometry c1 = new CombinedGeometry(GeometryCombineMode.Union, Cross1, Cross2);
The CombinedGeometry class only works with other System.Windows.Media.Geometry objects, not System.Windows.Shapes. You need to use the equivalent RectangleGeometry class instead.
Something such as:
RectangleGeometry Cross1 = new RectangleGeometry(new Rect(0, 0, 15, 110));
Cross1.Transform = rotateTransform1;
RectangleGeometry Cross2 = new RectangleGeometry(new Rect(0, 0, 15, 110));
Cross2.Transform = rotateTransform2;
CombinedGeometry c1 = new CombinedGeometry(GeometryCombineMode.Union, Cross1, Cross2);
I am trying to create a 50 x 50 square that has half of the rectangle white and the other half black (the lines going vertically instead of horizontally). I have the following code, but it is not filling the rectangle as expected. How do I make it 50% white and 50% black?
System.Windows.Shapes.Rectangle swatch = new System.Windows.Shapes.Rectangle();
swatch.Width = 50;
swatch.Height = 50;
DrawingBrush blackBrush = new DrawingBrush();
GeometryDrawing backgroundSquare = new GeometryDrawing(System.Windows.Media.Brushes.White,null,new RectangleGeometry(new Rect(25, 0, 50, 50)));
GeometryGroup gGroup = new GeometryGroup();
gGroup.Children.Add(new RectangleGeometry(new Rect(25, 0, 100, 100)));
GeometryDrawing checkers = new GeometryDrawing(new SolidColorBrush(Colors.Black), null, gGroup);
DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);
blackBrush.Drawing = checkersDrawingGroup;
blackBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
blackBrush.TileMode = TileMode.Tile;
swatch.Fill = blackBrush;
sp_Thumbnails.Children.Add(swatch);
Its simple to have three sections just have one more GeometryDrawing object within your drawingGroup.
you can also configure the number of GeometryDrawing will be there within your drawingGroup as below.
Please see the generic solution to your problem that will display horizontal sections as per the groupCount value.
public void CreateRectangle(int groupCount)
{
Rectangle swatch = new System.Windows.Shapes.Rectangle();
swatch.Width = 50;
swatch.Height = 50;
double groupsize = 100 / groupCount;
DrawingBrush blackBrush = new DrawingBrush();
DrawingGroup checkersDrawingGroup = new DrawingGroup();
//Considering 3 as groupCount
List<SolidColorBrush> brushes = new List<SolidColorBrush>() { Brushes.Black, Brushes.White,Brushes.Red };
double location = 0;
for (int i = 0; i < groupCount; i++)
{
GeometryDrawing drawing = new GeometryDrawing(brushes[i] , null,
new RectangleGeometry(new Rect(0, location,groupsize,groupsize)));
checkersDrawingGroup.Children.Add(drawing);
location += groupsize;
}
blackBrush.Drawing = checkersDrawingGroup;
swatch.Fill = blackBrush;
brdrect.Children.Add(swatch);
}
To fill your rectangle half with black and half with white. I modified your code as below. This will create a rectangle with lines separating two sections vertically.
Rectangle swatch = new System.Windows.Shapes.Rectangle();
swatch.Width = 50;
swatch.Height = 50;
DrawingBrush blackBrush = new DrawingBrush();
GeometryDrawing backgroundSquare = new GeometryDrawing(Brushes.White, null,
new RectangleGeometry(new Rect(0, 0, 25, 25)));
GeometryGroup gGroup = new GeometryGroup();
gGroup.Children.Add(new RectangleGeometry(new Rect(25, 0, 25, 25)));
GeometryDrawing checkers = new GeometryDrawing(Brushes.Black, null, gGroup);
DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);
blackBrush.Drawing = checkersDrawingGroup;
swatch.Fill = blackBrush;
brdrect.Children.Add(swatch);
If you want your sections to be spliced horizontally then you will need few changes in above code.
just modify the rectangle drawing creation section as below.
GeometryDrawing backgroundSquare = new GeometryDrawing(Brushes.White, null,
new RectangleGeometry(new Rect(0, 0, 25, 25)));
GeometryGroup gGroup = new GeometryGroup();
gGroup.Children.Add(new RectangleGeometry(new Rect(0, 25, 25, 25)));
GeometryDrawing checkers = new GeometryDrawing(Brushes.Black, null, gGroup);
I try to generate an image for a tile consisting of a grid with background color and a PNG with transparent background.
var TestTile = new Grid()
{
Background = colTemp,
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Margin = new Thickness( 0, 12, 0, 0 ),
};
TestTile.Arrange(new Rect(0, 0, 366, 366));
var ico = new Image() {
Source = new BitmapImage(new Uri("Images/mCloudSunT.png", UriKind.Relative)),
};
TestTile.Children.Add(ico);
...
bitmap.Render(TestTile, new TranslateTransform());
...
I get the image with background color but without the PNG. I get no error and the URI is correct (tested).
new code:
var colTemp = new SolidColorBrush(Color.FromArgb(255, 174, 190, 206));
var TestTile = new Grid()
{
Background = colTemp,
Height = 336,
Width = 336,
};
var ico = new Image() {
Source = new BitmapImage(new Uri("Images/mCloudSunT.png", UriKind.Relative)),
};
Grid.SetColumn(ico, 0);
Grid.SetRow(ico, 0);
TestTile.Children.Add(ico);
TestTile.Measure(new Size(336, 336));
TestTile.Arrange(new Rect(0, 0, 366, 366));
TestTile.UpdateLayout();
Here is the code for generating the image:
using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication())
{
if (!store.DirectoryExists("shared/shellcontent"))
{
store.CreateDirectory("shared/shellcontent");
}
var bitmap = new WriteableBitmap(336, 336);
bitmap.Render(TestTile, new TranslateTransform());
var stream = store.CreateFile("/shared/shellcontent/test.jpg");
bitmap.Invalidate();
bitmap.SaveJpeg(stream, 366, 336, 0, 100);
stream.Close();
And here the code for the use as tile background:
ShellTile PinnedTile = ShellTile.ActiveTiles.First();
FlipTileData UpdatedTileData = new FlipTileData
{
BackgroundImage = new Uri("isostore:/shared/shellcontent/test.jpg", UriKind.RelativeOrAbsolute),
};
PinnedTile.Update(UpdatedTileData);
Call Measure and then Arrange after adding icon.
TestTile.Measure( new Size( 366,366 ) );
TestTile.Arrange( new Rect( 0, 0, 366, 366 ) );
TestTile.UpdateLayout();
...
WritableBitmap...
I see no reason for calling SetColumn, SetRow, Measure, Arrange, or UpdateLayout. Also, after calling Render(), call Invalidate(). Try this:
var colTemp = new SolidColorBrush(Color.FromArgb(255, 174, 190, 206));
var TestTile = new Grid()
{
Background = colTemp,
Height = 336,
Width = 336,
};
var ico = new Image() {
Source = new BitmapImage(new Uri("Images/mCloudSunT.png", UriKind.Relative)),
};
TestTile.Children.Add(ico);
....
bitmap.Render(TestTile, new TranslateTransform());
bitmap.Invalidate();
I need to mask dynamically created images, so that they will be shown as circles.
Pictures can be square, but are usually rectangles... so the circle that will be shown can be taken from the center of it...so the shown circle must be inscribed in the picture and centered in the center of it.
This is the code I'm using right now:
//Setting up the image
Image image = new Image();
image.Height = 70;
image.Width = 70;
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("http://url-of-the-image", UriKind.Absolute);
image.CacheMode = new BitmapCache();
image.Source = bitmapImage;
image.Stretch = Stretch.UniformToFill;
image.VerticalAlignment = System.Windows.VerticalAlignment.Center;
//Setting up the mask
RadialGradientBrush opacityMask = new RadialGradientBrush();
GradientStop gs1 = new GradientStop();
GradientStop gs2 = new GradientStop();
GradientStop gs3 = new GradientStop();
gs1.Color = Color.FromArgb(255, 0, 0, 0);
gs1.Offset = 0.0;
gs2.Color = Color.FromArgb(255, 0, 0, 0);
gs2.Offset = 0.999;
gs3.Color = Color.FromArgb(0, 0, 0, 0);
gs3.Offset = 1.0;
opacityMask.GradientStops.Add(gs1);
opacityMask.GradientStops.Add(gs2);
opacityMask.GradientStops.Add(gs3);
image.OpacityMask = opacityMask;
//Showing the image
panel.Children.Add(image);
This all works fine, but when the pictures are rectangular and not square, this creates an ellipse instead of a circle... any idea on how can I force it to create a circle?
I also tried to specify some more parameters, but doesn't seem to help:
opacityMask.Center = new Point(0.5, 0.5);
opacityMask.RadiusX = 0.5;
opacityMask.RadiusY = 0.5;
Okay, today i tried again to fix this, and i came out with a solution.
It's not the best, more clean solution ever...but works :)
I basically wrapped the picture (not masked) into a StackPanel and then applied the mask to the StackPanel instead ;)
This is how it looks like (the only lines that change from the original are the the last few ones):
//Setting up the image
Image image = new Image();
image.Height = 70;
image.Width = 70;
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("http://url-of-the-image", UriKind.Absolute);
image.CacheMode = new BitmapCache();
image.Source = bitmapImage;
image.Stretch = Stretch.UniformToFill;
image.VerticalAlignment = System.Windows.VerticalAlignment.Center;
//Setting up the mask
RadialGradientBrush opacityMask = new RadialGradientBrush();
GradientStop gs1 = new GradientStop();
GradientStop gs2 = new GradientStop();
GradientStop gs3 = new GradientStop();
gs1.Color = Color.FromArgb(255, 0, 0, 0);
gs1.Offset = 0.0;
gs2.Color = Color.FromArgb(255, 0, 0, 0);
gs2.Offset = 0.999;
gs3.Color = Color.FromArgb(0, 0, 0, 0);
gs3.Offset = 1.0;
opacityMask.GradientStops.Add(gs1);
opacityMask.GradientStops.Add(gs2);
opacityMask.GradientStops.Add(gs3);
//Setting up the StackPanel
StackPanel sp = new StackPanel();
sp.OpacityMask = opacityMask;
//Showing the image
sp.Children.Add(image);
panel.Children.Add(sp);
I have the method, which is executed in Application_Deacitvated/Closing().
public bool createBackTile()
{
if(AlarmClock.IsExists())
{
ImageBrush background = new ImageBrush()
{
ImageSource = new BitmapImage(new Uri("/BackBackgroundTheme.png", UriKind.Relative)),
AlignmentX = AlignmentX.Center,
AlignmentY = AlignmentY.Center
};
// Preparing tile image.
TextBox tileImageData = new TextBox()
{
Text = AlarmClock.Read().ToShortTimeString(),
FontSize = 45,
FontWeight = FontWeights.Bold,
Foreground = new SolidColorBrush(Colors.White),
//Background = background,
Height = 173,
Width = 173,
HorizontalContentAlignment = HorizontalAlignment.Center,
VerticalContentAlignment = VerticalAlignment.Center,
Padding = new Thickness(-12),
Margin = new Thickness(0),
Clip = new RectangleGeometry { Rect = new Rect(0, 0, 173, 173) }
};
Canvas canvas = new Canvas()
{
Width = 173,
Height = 173,
Background = background,
Margin = new Thickness(0)
};
canvas.Children.Add(tileImageData);
// Saving tile image.
WriteableBitmap tileImage = new WriteableBitmap(173, 173);
tileImage.Render(canvas, null);
tileImage.Render(tileImageData, null);
tileImage.Invalidate();
using(var stream = IsolatedStorageFile.GetUserStoreForApplication().CreateFile("/Shared/ShellContent/BackBackground.jpg"))
{
tileImage.SaveJpeg(stream, 173, 173, 0, 100);
}
// Sets data for tile.
StandardTileData tileData = new StandardTileData()
{
BackgroundImage = new Uri("BackgroundAlarmSet.png", UriKind.Relative),
BackBackgroundImage = new Uri(#"isostore:/Shared/ShellContent/BackBackground.jpg"),
BackContent = "",
BackTitle = "",
};
// Sets tile.
ShellTile.ActiveTiles.FirstOrDefault().Update(tileData);
return true;
}
return false;
}
So, as you can see, I want to generate tile with my text in the center of it with image background "BackBackgroundTheme.png". That tile I'm trying to save in IsolatedStorage and assign it to BackBackgroundImage.
But it doesn't work. The tile is flipping over but the BackBackground is completly black. I have loaded this manipulated background and it seems that's indeed just black box. So, how to get it working?
Try: BackgroundImage = new Uri(#"isostore:/Shared/ShellContent/BackBackground.jpg", UriKind.Absolute)
I have finally found out where the problem is.
It seems, that generation of tile image isn't done properly in Application_Closing/Deactivating(). So I moved image generation to somwhere else and now, when application is closing/deactivating, I just set previously generated image to a tile.
Try this:
canvas.Children.Add(tileImageData);
canvas.UpdateLayout();
// Saving tile image.
WriteableBitmap tileImage = new WriteableBitmap(173, 173);