I want to display one or more CheckBoxes on a tile in my Windows Phone app. This works already for TextBlocks, but with a CheckBox it shows only the Text of the CheckBox and not the Checkmark itself.
This is a sample of my code:
public void CreateTile()
{
StackPanel panel = new StackPanel();
panel.VerticalAlignment = VerticalAlignment.Top;
panel.Margin = new Thickness(7.0, 7.0, 7.0, 0);
panel.Width = 336;
panel.Height = 336;
panel.Orientation = Orientation.Vertical;
// Create and add a CheckBox for each task
foreach (var task in _tasks)
{
TextBlock textBlock = new TextBlock();
textBlock.TextWrapping = TextWrapping.Wrap;
textBlock.Style = App.Current.Resources["PhoneTextLargeStyle"] as Style;
textBlock.Foreground = new SolidColorBrush(Colors.White);
textBlock.Text = task.Text;
CheckBox checkBox = new CheckBox();
checkBox.IsChecked = task.IsDone;
checkBox.Content = textBlock;
panel.Children.Add(checkBox);
}
Grid layoutRoot = new Grid();
layoutRoot.Background = new SolidColorBrush(Colors.Blue);
layoutRoot.Width = 336;
layoutRoot.Height = 336;
layoutRoot.Children.Add(panel);
layoutRoot.Measure(new Size(336, 336));
layoutRoot.Arrange(new Rect(0, 0, 336, 336));
layoutRoot.UpdateLayout();
// Render grid into bitmap
WriteableBitmap bitmap = new WriteableBitmap(336, 336);
bitmap.Render(layoutRoot, null);
bitmap.Invalidate();
// Save background image for tile to isolated storage
Uri backgroundImage = TileHelper.SaveTileImage(bitmap);
}
If I create a tile with a background image created by the method above, the tile will look like this:
As you can see the text is displayed but there is no checkmark/square before the text.
I personally like to use Segoe UI Symbol as the Font Family in such situations. This gives me the flexibility to use Text and Symbols together while not messing around too much with code / images. SUS has great modern icons (or characters if you may call them) that are very much Metroish, I'd say.
Just open up Charmap (Win + R and type in charmap) and in the Font Select -> Segoe UI Symbol. Now you can select any character you like and paste into Visual Studio Editor itself. Yes, it works!
The symbol may not display properly in the Editor itself but it will at Runtime
Here are some suggestions:
Here are the corresponding characters:
☑
✅
Don't worry about them not looking right HERE. They should when you follow the above steps.
You can always "hack" it by using images of checkbox controls. Did you try to show created control in UI? i.e. adding it to page? Just to see if your code is executed correctly.
Or another solution would be to use check mark character - http://www.fileformat.info/info/unicode/char/2713/index.htm
I'll try to replicate this problem in my test app since it is strange that it does not work.
Related
I'm making a Button at runtime with a ViewBox and inside the ViewBox I'm adding a TextBlock. It all works fine, except I can't seem to get the text to left-align. After some fiddling, I realized this is because the TextBlock isn't the full width of the button.
var row = new RowDefinition();
OrdersGrid.RowDefinitions.Add(row);
var button = new Button();
button.HorizontalAlignment = HorizontalAlignment.Stretch;
button.VerticalAlignment = VerticalAlignment.Stretch;
button.MaxHeight = 40;
button.Background = (Brush)System.Windows.Application.Current.Resources["OrangeGradient"];
button.BorderThickness = new Thickness(.1);
button.Margin = new Thickness(.1);
OrdersGrid.Children.Add(button);
Grid.SetColumn(button, 0);
Grid.SetRow(button, rowNumber);
Viewbox vb = new Viewbox();
vb.StretchDirection = StretchDirection.Both;
vb.HorizontalAlignment = HorizontalAlignment.Stretch;
TextBlock tb = new TextBlock();
tb.HorizontalAlignment = HorizontalAlignment.Stretch;
tb.Text = rowNumber + " - " + CustomerName;
tb.Padding = new Thickness(0);
tb.TextAlignment = TextAlignment.Left;
vb.Child = tb;
button.Content = vb;
If I change tb.HorizontalAlignment = HorizontalAlignment.Stretch; to tb.Width = 400; it left-aligns. However, I have no guarantee that that is the correct size, but it does narrow the problem down to the width of the TextBlock. How can I make the TextBlock (And ViewBox) the full width of the Button?
Set the HorizontalContentAlignment property of the Button to Left:
button.HorizontalContentAlignment = HorizontalAlignment.Left;
Why do you want to make the contents the full width of the button? What visual or functional difference would that make? I don't see anything in your code that would require that. If the TextBlock had a background brush of its own, that would be a reason, but it doesn't.
If you absolutely did need to left center the text within something stretched, put a Border around the ViewBox inside the button, set Button.HorizontalContentAlignment = Stretch, and set ViewBox.HorizontalAlignment = Left.
The bottom line here is that the Button's content is by default centered in the Button's content area, and Button.HorizontalContentAlignment controls that. Its default value is Center. If you want to force the content to stretch, set it to Stretch.
If you really just want to left justify the content, just use mm8's answer. Quick and easy.
I want to create a button in my windows 8 desktop app, which will have an image and a text block. I have to do this using C# coding.
My code is as follows,
Button btn = new Button();
StackPanel btnContentPanel = new StackPanel();
btnContentPanel.Orientation = Orientation.Horizontal;
Image img = new Image();
img.Source = new BitmapImage(newUri(#"C:\Users\Desktop\Images\download.jpg"));
img.Stretch = Stretch.Uniform;
btnContentPanel.Children.Add(img);
TextBlock txBlock = new TextBlock();
txBlock.Text = "My Button";
btnContentPanel.Children.Add(txBlock);
btn.Content = btnContentPanel;
This is not giving any error but the image is not getting displayed. If I add another text block in place of the image, then its appearing, but not the image.
Am I missing anything ? Please help, thank you.
Try building your button like this:
Button btn= new Button
{
Width = 30,
Height = 30,
Content = new Image
{
Source = new BitmapImage(#"C:\Users\Desktop\Images\download.jpg"))
}
};
In the case of a 'missing' image there are several things to consider:
When Xaml can't locate a resource it might ignore it (when it won't throw a XamlParseException)
The Resource must be properly added and defined:
make sure it exists in your project where expected.
Make sure it is built with your project as a Resource.
(Right click -> Properties -> BuildAction='Resource')
Another thing to try in similar cases, which is also useful for reusing of the image (or any other resource):
Define your Image as a Resource in your Xaml:
<UserCondrol.Resources>
<Image x:Key="MyImage" Source.../>
</UserControl.Resources>
And later use it in your desired control/controls:
<Button Content={StaticResource MyImage} />
I'm using a Dockpanel via C# & WPF to display 2 user controls
The Left UserControl is a Datagrid with Filters (Called Filter)
The Right UserControl is a Custom Form That will change depending on what type of Data the user is viewing.
I'm setting the Dockpanel via this code
private void SetMasterDock(UIElement MyFilter, UIElement NewViewer)
{
MasterDock.Children.Clear();
DockPanel.SetDock(MyFilter, Dock.Left);
DockPanel.SetDock(NewViewer, Dock.Right);
MasterDock.Children.Add(MyFilter);
MasterDock.Children.Add(NewViewer);
}
All the above works as coded.
Now the Change I'm looking for (If possible)
I'd like to know what / how to enable the User to be able to Adjust the Scaling of the two Usercontrols. so if they wish to see More or less of one side or the other, they can just Click & Slide a Divider bar so they can adjust their view to their personal preferences.
ETA: New Code
MasterDock.Children.Clear();
Grid SplittableGrid = new Grid();
GridSplitter MovableDevider = new GridSplitter(); MovableDevider.Background = Brushes.Blue; MovableDevider.HorizontalAlignment = HorizontalAlignment.Right; MovableDevider.VerticalAlignment = VerticalAlignment.Stretch; MovableDevider.Width = 5;
ColumnDefinition LeftDefinition = new ColumnDefinition(); LeftDefinition.Width = new GridLength(200);
ColumnDefinition RightDefinition = new ColumnDefinition(); RightDefinition.Width = new GridLength(1,GridUnitType.Star);
SplittableGrid.ColumnDefinitions.Add(LeftDefinition);
SplittableGrid.ColumnDefinitions.Add(RightDefinition);
Grid.SetColumn(MyFilter, 0);
Grid.SetColumn(MovableDevider, 0);
Grid.SetColumn(NewViewer, 1);
SplittableGrid.Children.Add(MyFilter);
SplittableGrid.Children.Add(MovableDevider);
SplittableGrid.Children.Add(NewViewer);
DockPanel.SetDock(SplittableGrid, Dock.Left);
MasterDock.Children.Add(SplittableGrid);
in winforms the control you are looking for is the splitcontainer. However in WPF this is done using grid + gridSplitter. both of those controls are in the default toolbox.
I'm trying to create dynamically text box in WPF. It is very essential that I will have the flexibility to determine where the text box will be - in pixel level.
I have found many answers which use stackpanel to create "run-time" text box - but couldn't find how to construct it according to specified location.
the textbox has to be "word wrap" and I'm using a button click event to create the text box
this is the code for now, I really don't know which methods or properties will be helpful.
thanks :)
private void button1_Click(object sender, RoutedEventArgs e)
{
TextBox x = new TextBox();
x.Name = "new_textbox";
x.TextWrapping= TextWrapping.Wrap;
x.VerticalScrollBarVisibility=ScrollBarVisibility.Visible;
x.AcceptsReturn = true;
x.Margin = new Thickness(5, 10, 0, 0);
}
TextBox x = new TextBox();
x.Name = "new_textbox";
x.TextWrapping= TextWrapping.Wrap;
x.VerticalScrollBarVisibility=ScrollBarVisibility.Visible;
x.AcceptsReturn = true;
x.Margin = new Thickness(5, 10, 0, 0);
HouseCanvas.Children.Add(x);
Canvas.SetLeft(x, 20);
Canvas.SetTop(x, 20);
You probably want to place it in a Canvas, if you care about pixel placement of the textbox itself. You'll need to use x.SetValue(Canvas.LeftProperty, pixelX) [and .RightProperty, etc...] to get the position exactly right. Having not done this myself, I'd guess that you need to put the canvas in the right Z-order (on top), and make it transparent. There may also be issues with events, depending on the z-order. Good luck!
-Kev
So... did someone know how to make it?...
In a panel is easy, because we can set the "AutoScroll" property, to true... but groupbox doesn't have it.
Anyways... exists some way for it?, thanks in advance ;-).
Quite simple... Add a panel inside a group box.
Declare Group box object and Panel object which will contain the scroll bar by default and some of my Check box objects;I read somewhere that Group box's don't have scroll bar for aesthetic reasons(i hope it's not true, why not let the user make that call). Solution is simple, once you know that you will create a panel that will lay on top of your group box just to get your scroll bar.
private System.Windows.Forms.GroupBox grpDR;//GROUPBOX IN WHICH PANEL WILL OVERLAY
private System.Windows.Forms.Panel grpScrlDR;//PANEL WHICH WILL HAVE SCROLL BAR AND CONTAIN CHECK BOXES
private System.Windows.Forms.CheckBox chkDr2;
private System.Windows.Forms.CheckBox chkDr1;
private void InitializeComponent()
{
this.grpScrlDR = new System.Windows.Forms.Panel();
this.chkDr2 = new System.Windows.Forms.CheckBox();
this.chkDr1 = new System.Windows.Forms.CheckBox();
this.grpDR = new System.Windows.Forms.GroupBox();
this.grpScrlDR.SuspendLayout();
this.grpDR.SuspendLayout();
//
// grpScrlDR
// PANEL DETAILS ADDING CHECKBOX CONTROLS AND ENABLING AUTO SCROLL
this.grpScrlDR.AutoScroll = true;
this.grpScrlDR.Controls.Add(this.chkDr2);
this.grpScrlDR.Controls.Add(this.chkDr1);
this.grpScrlDR.Dock = System.Windows.Forms.DockStyle.Fill;
this.grpScrlDR.Location = new System.Drawing.Point(5, 336);
this.grpScrlDR.Name = "grpScrlDR";
this.grpScrlDR.Size = new System.Drawing.Size(175, 230);
this.grpScrlDR.TabIndex = 0;
//
// chkDr2
//
this.chkDr2.AutoSize = true;`
this.chkDr2.Location = new System.Drawing.Point(13, 45);
this.chkDr2.Name = "chkDr2";
this.chkDr2.Size = new System.Drawing.Size(54, 20);
this.chkDr2.TabIndex = 1;
this.chkDr2.Text = "Permit#";
this.chkDr2.UseVisualStyleBackColor = true;
this.chkDr2.CheckedChanged += new System.EventHandler(this.chkDr_CheckedChanged);
//
// chkDr1
//
this.chkDr1.AutoSize = true;
this.chkDr1.Checked = true;
this.chkDr1.CheckState = System.Windows.Forms.CheckState.Checked;
this.chkDr1.Location = new System.Drawing.Point(13, 22);
this.chkDr1.Name = "chkDr1";
this.chkDr1.Size = new System.Drawing.Size(54, 20);
this.chkDr1.TabIndex = 0;
this.chkDr1.Text = "Account";
this.chkDr1.UseVisualStyleBackColor = true;
this.chkDr1.CheckedChanged += new System.EventHandler(this.chkDr_CheckedChanged);
//
// grpDR
// GROUP BOX DETAILS - GROUP BOX IS ADDING PANEL CONTROLS
this.grpDR.Controls.Add(this.grpScrlDR);
this.grpDR.Font = new System.Drawing.Font("Microsoft Sans Serif", 9.75F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.grpDR.Location = new System.Drawing.Point(5, 336);
this.grpDR.Name = "grpDR";
this.grpDR.Size = new System.Drawing.Size(175, 230);
this.grpDR.TabIndex = 46;
this.grpDR.TabStop = false;
this.grpDR.Text = "Report by";
this.grpDR.Visible = false;
}
The GroupBox cannot display a scroll bar. If you need a control similar to a GroupBox that can contain a scroll bar, see the Panel control
Read This Article - Find (The GroupBox cannot display a scroll bar) Text
If you need to add a panel inside of your GroupBox, Dock a Panel inside of the GroupBox and set the AutoScroll property on the docked Panel to true. You can then place any controls you need inside of the GroupBox on the Panel, which will scroll when necessary.
If you don't like the way that looks as you stated above, then you have two possible options:
There may be a way to hack (more like "abuse" in this situation) the GroupBox control by making calls into the native Win32 API to add a scrollbar. I rarely use native calls on managed controls, but I've done this in situations where, for instance, I need to disable the scroll bar on a ListView as ListView doesn't expose this property. Below I expose the native Win32 function for use in C#, just call SetScrollBarVisible to enable or disable the scrollbar as needed from your code (I have not tested this on a GroupBox):
If aesthetics is THAT important to you (not a bad thing, user experience is greatly underappreciated in many areas of the application development world) and adding a scroll bar to the GroupBox doesn't work/look good to you, you will need to find another solution. I would imagine the best solution would be to make your own control from the ground up that meets your expectations (or modify the scrollbar itself, no idea how to do this), though this is can be a lot more work than it might be worth.
Here is how I expose and call the Win32 function SetScrollBar from my C# code (sorry, the DllImport won't format as a code block for some reason):
[DllImport ("user32")]
private static extern long ShowScrollBar (long hwnd , long wBar, long bShow);
long SB_HORZ = 0;
long SB_VERT = 1;
long SB_BOTH = 3;
private static void SetScrollBarVisible (Control control, long sb, bool enable)
{
if (control != null) return;
if (enable)
ShowScrollBar(control.Handle.ToInt64(), sb, 1);
else
ShowScrollBar(control.Handle.ToInt64(), sb, 0);
}
To do this you would have to add 1 panel to the groupbox and set the autoscroll property to true.
Then you would add a second panel which would be large then the first panel.
On this second panel (StringPanel in the beleow code) you would add controls.
System.Windows.Forms.GroupBox StringsGroup;
System.Windows.Forms.Panel StingPanel;
System.Windows.Forms.Panel StringPanel2;
StringsGroup = new System.Windows.Forms.GroupBox();
StingPanel = new System.Windows.Forms.Panel();
StringPanel2 = new System.Windows.Forms.Panel();
//Add your controls to StringPanel
StingPanel.Size = new System.Drawing.Size(300, 800);
StringPanel2.Size = new System.Drawing.Size(325, 345);
StringPanel2.AutoScroll = true;
this.StringPanel2.Controls.Add(StingPanel);
this.StringsGroup.Controls.Add(this.StringPanel2);
Horizontal Scroll Bar Tip
If you have a panel where all the controls contained within it are anchored to the top (so that they are centered) you will never see the horizontal scroll bar. You need to have at least one control that is anchored left & top that disappears when the panel is too small to show it in order for the horizontal scroll bar to appear. I put a label with hidden text on the panel to accomplish this.
This little tidbit took me quite a while to discover! Hope it's helpful!
If you dont want scrollbars, but want your GroupBox to grow, you can edit these below properties from the Layout section as shown below.
AutoSize = true;
AutoSizeMode = GrowOnly;