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.
Related
We were able to understand if ItemsControl finished it's rendering by checking Status within StatusChanged event in WPF.
How can I make sure that ItemsControl finished rendering in UWP? I want to make sure that rendering is completed and access some elements using ContainerFromItem.
I have custom dragging logic using events like ManipulationDelta. After rendering, I want to get the ContentPresenter's position based on it's parent UIElement and then use that position to draw some stuff using Win2D. I need item's position, so I need the container, so I need to make sure containers are rendered in the first place, and it goes like that.
To use ItemsControl in UWP, you also need to know about the UI virtualization. The ItemsControl uses UI virtualization. It means that not all items will be rendered at the same time, instead only the viewable area.
You could try the following code:
<ItemsControl x:Name="item">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Loaded="Grid_Loaded">
<TextBlock Text="{Binding}"></TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I registered the Loaded event for the 'Grid' which is included in every item.
is it possible to get ellipsis inside button when content length increase the width of button.
I tried editing template but did get much success?
You should have some options. If it's just at the instance, you can just plop your content in as TextBlock so something like;
<Button>
<Button.Content>
<TextBlock Text="Blah Blah Blah" TextTrimming="WordEllipsis"/>
</Button.Content>
</Button>
Or if you make a custom style template for Button you could replace the ContentPresenter in it with a TextBlock with it's content bound to the template like Text="{TemplateBinding Content}" and apply your TextTrimming directly to it. Except remember TextTrimming needs a boundary to invoke it, so your Button's may require like a set MaxWidth/Width or its parent panel will have to restrict its size to invoke the trimming.
Hope this helps, Cheers.
PS - This same concept can be used in WP, WPF, Silverlight, whatever really.
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).
Tried adding a Coding4Fun RoundButton to my WP8 XAML. Looked around and copied from samples (i.e. this site), but despite the nice images I see everywhere, the text is displayed on top of my icon:
The XAML code is:
<c4f:RoundButton x:Name="buttonShrtn" Click="buttonShrtn_Click" ImageSource="Assets/Images/icon-button-32.png" FontSize="18" Content="Shrtn" VerticalAlignment="Center" HorizontalAlignment="Right"/>
I just can't find a similar case anywhere. Could there be something else in my XAML that can cause this?
You have to use Label instead of Content.
EDIT
RoundToggleButton, RoundButton, OpacityToggleButton, Tile, and ImageTile content property shifted to Label property. (geekchamp)
Toolkit description.
So I have come to that point where I am saying to myself over and over again I am missing some basic stuff.
I have a ScrollViewer with a RichTextBlock that converts HTML to the content.
Everything shows up as expected but I can't scroll! I had the VerticalScrollBarVisibility to Hidden but I have taken that out. After seeing this anwsear in StackOverflow I have stoped with the following code:
<ScrollViewer VerticalAlignment="Stretch"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Auto"
ZoomMode="Disabled"
Padding="52"
Background="#60000000" >
<RichTextBlock rtbx:Properties.Html="{Binding TextHTML}"
TextAlignment="Justify"
FontSize="20" />
</ScrollViewer>
It also seems that the PanningMode is not avaiable in Windows 8 but I belive that it is still the expected behaviour to scroll with the touch.
I have tried to put the ManipulationMode to All in the ScrollViewer and also tried to set to none in the RichTextBlock. However, I got no sucess with those approaches.
Removing the manipulation modes and isolating the problem and simplifing the "options" I was using led me to the conclusion that the ScrollViewer wasn't the issue.
The problem was: I had was a Control that was on top of the ScrollViewer that was hidden (opacity = 0). This Control swallowed all the events that I was needing in the ScrollViewer. Basic mistake.
I had to put the Visibility equals to Collapsed.