Using the latest pre-release, I noticed that the button now has a Button.ContentLayout property, which I am hoping will allow us to add custom views to buttons whilst retaining the rest of the buttons functionality.
The questions are, is this what this is for? And if so, how is it used?
Kind Regards
Brian
No, this property does not allow you to set any custom content to be rendered inside the button.
ContentLayout on the Button element is a property of type "ButtonLayoutContent" it determines the positioning of the button's image in relation to it's text.
It has two properties, image position and spacing.
Position is used to set the placement of the image in relation to the text. The image can be above or below the text, or to the left or the right side of the text.
Spacing is the amount of space between the image and the text.
In the Android implementation of the Button renderer, it sets the CompoundDrawablePadding property, which is defined as the padding between the compound drawables and the text.
On iOS, the default renderer does some math to figure out the correct values for ImageEdgeInsets, TitleEdgeInsets and ContentEdgeInsets
Example usage in XAML:
<Button BackgroundColor="Color.Gray" Image="coffee.png" Text="Click Me" ContentLayout="Top,10">
In C# code, you simply pass the two values in the constructor
btn.ContentLayout = new ButtonContentLayout(ImagePosition.Top,10);
Related
My program has several Label controls that are updated to have different text every so often. I have a few icons that I want to reference within the text. I figured that instead of just displaying "(E)" in the Label, there should be a way to replace that with the corresponding image that I have that looks like: . I figure that I need to override the Label.Paint event, but I'm not too sure how to do that properly. Every occurrence of "(E)" needs to be replaced with the image inline.
Example
Look for the (E) icon on the top. → Look for the icon on the top.
This is not a trivial exercise.
You'd have to provide a property on your derived label class to attach the image(s) to the text.
Embed some sort of token(s) in the text to represent the image(s).
In the OnPaint you have to parse the text for the token(s)
Do a graphics.MeasureString() for each bit of text between the tokens. And then render it with graphics.DrawString() move to the right by the width of the text, render the image based on the token using one of the many graphics.DrawImage() overrides - move to the right by the width of the image and repeat.
I am making a video game. I need that it will be available at full screen mode, and with different resolutions.
I already know how to make application maximized and how to remove the built-in user interface, that is not the problem.
The problem is, that when I run it in full mode, all controls simply take the top-left corner, leaving the remaining space empty.
What I want, that controls would be spread evenly across the screen, with new coordinates and sizes, but same proportions.
I tried using anchoring. It works, but only when there is just one control. When there are more controls, and in my menu bar there are 12, and I try using anchoring, they are stretched, but put on top of each other.
Is there a way to get the right result? If so, can you please help me?
Thank you in advance,
Evgenie
Use TableLayoutPanel, anchor it to the left, right and bottom of the form, set ColumnCount=3, RowCount=1, edit column sizes in the Columns property, then drop buttons into corresponding cells and align them using their Dock, Anchor and Padding properties.
There is 'Dock' property for controls. You can add controls to a TabaleLayoutPanel and set the Dock property to DockStyle.Fill.
some ways i remember through which you can achieve it
Dock - MSDN link
Anchor - MSDN link
programitically setting the location according to the screen resolution ration
We have a case where we need to display Character Ellipsis(i.e. show text as trimmed) when we have multiline text.
The textblock shows trailing ellipsis when the content is anyway bigger than the width of the multiline TextBlock (i.e. TextWrapping is set to Wrap).
But we have a case wherein, we need to show only one line with ellipsis whether the text width of the first line is greater than the width of textblock or not.
For example, consider the following sample text
String str = "1\n2\n3456\n45889";
textBlock.Text = str;
The TextBlock should display as shown below:
1...
and the ToolTip will show the entire text. I tried doing some research on the possibilities but could not find much help and was wondering if anyone in the community has encountered such a situation or perhaps could suggest me?
Since, we shouldn't change the underlying data object (real time scenario) but only change what is rendered to the user, I am guessing a Converter should do the trick but I am still stuck on how to proceed. Or do you guys have any other alternatives?
Create a custom control based off of the textblock which handles the business logic needed for the ellipse.
The binding of the actual text to a specific property can ensure that the text is not changed. While in a separate property you have the visual text with the ellipse which gets updated when the original text changes (the dependency property change event) and the visual text subsequently displayed on the screen. Also have the tooltip bound to the original text which helps in that scenario of showing the actual text and not the ellipsed text.
By creating an easy custom control you have the ability to handle the business logic all in one location and it can be used in other screens and projects.
I understand that the Semantic Zoom control is basically implemented in XAML this way:
<SemanticZoom>
<SemanticZoom.ZoomedOutView>
<!-- Put the GridView for the zoomed out view here. -->
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<!-- Put the GridView for the zoomed in view here. -->
</SemanticZoom.ZoomedInView>
</SemanticZoom>
What I'm confused about is, assuming I have a "start" or "main" page with six Gridviews on it, each of which will display individually when "zoomed in" to see their details, do I need a single Semantic Zoom to handle the entire collection of GridViews, or do I need a Semantic Zoom control for each GridView?
And if I only need one Semantic Zoom control to handle all of these (the Zoomed Out View will, indeed, be the same for all of them, by definition), how do I make the Zoomed In/detail view specific to the GridView selected?
IOW, if I have six GridViews with information for:
Green Bay Packers
Milwaukee Bucks
Baltimore Orioles
Rory Gallagher
Mark Twain
Abraham Lincoln
...how do I see to it that when the Zoomed In/detail view is activated, and the user "pinched out" on the "Mark Twain" grid, that the Mark Twain-specific page is displayed?
I believe you just need one Semantic Zoom control. But instead of having six different gridviews, can't you just have one bound to a grouped collection? And then your GridView can use an ItemTemplateSelector to display your different data types.
See here for itemtemplateselector: http://blogs.u2u.be/diederik/post/2012/05/22/Using-Dynamic-XAML-in-Windows-8-Metro.aspx
I can provide some code if needed.
And regarding making sure the correct GridView is selected, the semantic zoom control handles that for you.
Semantic zoom works best with a GridView bound to a grouped collection source. The zoomed in and zoomed out views only support a GridView or ListView as their child element, so if you have 6 groups, you can achieve that with a single grid view.
In terms of the zoomed out view, the same type of control can be used to represent the groups. This view can be customised to show the information that you need - e.g. The number of books in a section or maybe an overview of the section.
Handling the transition from the zoomed out view to zoomed in is easy enough, if a little convoluted in terms of setting up the binding (IIRC you need to specify the zoomed out binding in code) but moving in the other direction is not guaranteed to behave as you want it to. If the zoomed out view is only one screen wide, for example, then it doesn't make sense to try to scroll to the previously selected group.
I am not in front of my dev machine right now so I'm afraid I can't put a sample together for you, but there are lots of examples online.
I was wondering... I have a WinForms System.Windows.Forms.ListView with a bunch of ListViewItems that I'm drawing using the View.List style. Each ListViewItem has a "SmallIcon" that I fetch from the ListView's SmallImageList.
My problem is that the icons are showing too close to the border on the left. I've tried to change the bounds and the ListViewItem's Position property to no avail.
Is there anyway to have some kind of offset to ListViewItems?
The Win32 listview control doesn't have any setting to increase the space between the icon and the label (in any view, not just List). Setting ListViewItem.Position does nothing when the ListView is in List view.
A low-tech solution would be to simply prefix every ListViewItem's Text value with a single space. Slightly ugly, but oh so easy to do.
If you really want to have pixel level control, you will have to owner draw it. As always, if you are doing anything with a .NET ListView, ObjectListView makes owner drawing your items trivial.
As mentioned already, prefixing the text of all your items with a space is a super simple way to add padding. This has a pretty significant drawback, however. Once you do this, you lose the ability to find items in the ListView by simply starting to type their name while the ListView has focus.
Try adding white space to the left of your small images.
If you're using 16x16 images change to 24x16 for example by adding 8 white (or ListView Background color) pixels to the left.
If you are in ListView View LargeIcons then you can postion the text using item.position
A screenshot would be nice for an example to see exactly what you're after.
Funny thing... the Windows Explorer uses the ListView to display files and folders. i usually run my view in Report or Detail mode. i just switched it to List view mode and see the exact problem that you're describing! Yikes. Might be a bug with the Win32 object and that particular view type!
A quick workaround might be to use a Report style for the ListView with a single column or perhaps implement something yourself. The FlowLayoutPanel in .Net would work very nicely as a starting point for a custom list view.
As you are using the View.List style, I suspect you'll either need to implement some custom drawing or consider padding your images. You could also look at overriding the ListView control and manipulating it's bounds by overriding SetBoundsCore or SetClientSizeCore (or similar).
However, if the ListView were set-up for View.Details view, this could be done using the ListViewItem.IndentCount property:
The IndentCount property can be used
only when the View property of the
containing ListView is set to Details,
and the SmallImageList property of the
ListView is set. Source:MSDN
If you set the StateImageList property you can add a space of 16 px before the icons. I think you can adjust this additional space by loading an image with matching width as first entry into the StateImageList. But I have not tested this.
This thread discusses the opposite problem.