I have this grid-view loading dynamic content correctly. However I can't quite figure out how to make it fill how I want. I want the content to start in the upper left corner and then create instance going downward until no more can fit (This should be 4) then start back at the top to the right of the original item.
The maxRowsOrCols property give me the behavior I desire, but I will definitely be exceeding 4 columns.
Please teach me.
You can use an ItemsPanel with the WrapGrid. The Orientation property is Horizontal or Vertical first. This should allow you to set your layout as required, depending on screen size and ItemTemplate.
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximiumRowsOrColumns="4" Orientation="Vertical"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Related
I can't seem to figure out how I can stretch the items of my horizontal listview.
I have a list of items, and each one of those items contain a list of other items. Which means I have a list nested in another list. Since I want to display the items of the nested list horizontally, I have used StackPanel.
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
However it seems like it is not possible to stretch and make all the rectangles have the same width, while filling out the page, with StackPanel. Even with setting the HorizontalContentAlignment and HorizontalAlignment of the ListView to "Stretch". Is there a way to solve this problem? It seems like I should use Grid somehow, but since the list length of the nested list varies, I'm not sure.
Below is how it looks like, I just want the width of the rectangle to stretch and have the same width, filling out the empty space. The width of the rectangles should adjust if you make the app width bigger or smaller.
This is how I want it to look
I am trying to get a RichEditBox to take over the entire width of the app window and to be responsive to window resizing, so far the code I have is the following:
<RichEditBox HorizontalAlignment="Stretch"
TextWrapping="WrapWholeWords"
Height="250"
Name="Intro"/>
What I am getting from the code above is this:
Any ideas on how can I get this to work? Why is it that I tell the text to wrap and it doesn't follow?
UPDATE
I also tried this:
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
But the result is:
The problem that I am having is that it seems that HorizontalAlignment="Stretch" does not really do anything. The only way I am able to set a decent width is by hard-coding it, for example: Width="600". But if I do this my UI will not respond correctly to resizing. I also tried HorizontalContentAlingment="Stretch" but the result is exactly the same.
How can I get my RichEditBox take up all the available Width and Wrap at the same time?
If you look at the documentation of RichEditBox.TextWrapping, you'll notice that WrapWholeWords is invalid. You have to use
<RichEditBox TextWrapping="Wrap"/>
-or-
<RichEditBox TextWrapping="NoWrap"/>
Since Wrap is the default value, you can drop the property.
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
Edit: in reply to the updated question:
A control only takes the width of it's parent control. Some container controls (e.g. Grid) automatically take the full width available, while others (e.g. StackPanel) only take the required size of it's children. Using HorizontalAlignment="Stretch" in combination with a StackPanel as a parent control, will only use the MinWidth property instead of the full available width on your screen. Sometimes you can't directly see this issue, e.g. when your control is inside an itemtemplate of a ListView. Use the Live Visual Tree in Visual Studio to find the parent containers and locate the issue.
So in short: make sure your RichEditBox is inside a Grid (or similar control) instead of a StackPanel.
How to make CheckBox bigger on Windows 8 ?
I already know about LayoutTransform, but looks like there is not this property on Windows 8:
<CheckBox>
<CheckBox.LayoutTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</CheckBox.LayoutTransform>
</CheckBox>
Several ways:
You can increase the overall size by applying a render transform. This will double the height and width during rendering. It may not lay out as you want.
<CheckBox RenderTransformOrigin="0.5,0.5" >
<CheckBox.RenderTransform>
<CompositeTransform ScaleX="2" ScaleY="2"/>
</CheckBox.RenderTransform>
</CheckBox>
You can use a ViewBox, which will lay out in the same spot but won't give full control over the size
<Viewbox Height="100">
<CheckBox>
</CheckBox>
</Viewbox>
Or you can edit the template. This is the most code, but most will be generated for you if you select a checkbox in the designer, right click, and choose "Edit template...". It will provide the most control and you can completely swap out the Checkbox's elements. MSDN's Quickstart: Control templates demonstrates changing a Checkbox's template. Depending on the exact look you'll want you'll probably need to increase the sizes of all of the sub-elements (NormalRectangle, CheckGlyph, IndeterminateGlyph, FocusVisualWhite, and FocusVisualBlack).
Currently when I populate the TextBlock with too much text, specifically Connecting to Site 26 has a name too long, it appears like this:
This is the definition of the UserControl:
<StackPanel VerticalAlignment="Center">
<ProgressBar IsIndeterminate="True" />
<TextBlock Name="txtOverlayText" FontSize="25" Foreground="White" HorizontalAlignment="Center" />
</StackPanel>
The text is supposed to be centred and if it's too long it should not fall off the left side of the screen, rather it should be be visible on the left side and anything that can't fit on the right side should be replaced with dots, e.g.
Connecting to Site 26 has a name t...
Is there a way to do this?
Right, so luckily for some time now in most of the xaml based stuff we've had the super handy dandy TextTrimming ability where you can just slap TextTrimming="WordEllipsis" on something and get those friendly dots on the end.
Though just a tip, sometimes a TextBlock's parent panel wont invoke the boundary to make it happen, so you have to slap a Width value on something, or swap the parent panel, like occasionally depending on the layout things like a StackPanel have to be substituted with a Grid to invoke the trim.
Anyhow, hope this helps, cheers!
I have layout as described below:
<ScrollViewer>
<StackPanel Orientation="Horizontal">
<!-- ... -->
<ScrollViewer>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Visible" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ScrollViewer>
<!-- ... -->
</StackPanel>
</ScrollViewer>
And I would like to achieve that effect that is present in weather app.
In my application, when you're scrolling horizontaly using mouse wheel, when pointer gets over ItemsControl it immediately starts scrolling verticaly wheras in weather application there's fluent horizontal scrolling effect and scrolling verticaly begins when there's some time hover that vertical collection.
Is that behaviour somewhere implemented by default?.
Szymon
Generally, the guideline is that introducing vertical scrolling in a horizontally scrolling repeater is a bad idea. I think you should NOT consider Weather (or any standard Windows 8 app) as a model to emulate. Most of them violate the guidelines in some of the worst ways.
The Weather app accomplishes what you are asking based on the current mouse placement, the motion of the grid, and control with focus. That's a complex way of saying, some developer dreamed up a solution to help make their UI as confusing to the user as possible.
Please, don't.
What I think they do in order to achieve that effect is this:
If the mouse is over the vertical list for a while, they deactivate the horizontal scroll and activate the vertical one. Once the mouse moved outside the list, they switch back (deactivate the vertical scroll and activate the horizontal scroll).
I have not tested this to see if this works, but I think it should.