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.
Related
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.
I am creating a UWP application and I want a simple check box, no text, for each entry in my ListView. If I add a checkbox control to my template for the listview, I get a big gap after the checkbox for the Content - event when the content is empty.
If I turn on multiselect in the listview so I get a nice checkbox for each row, I can't seem to figure out how to databind the check box for each row in the listview to the Selected property of my ViewModel.
Below is a picture of what I want the area of the check box to look like. This was generated using the SelectionMode="Multiple" on the listview. Remember - the problem with this approach is I can't seem to find a way to bind the check box to the Selected property of my ViewModel class.
Below is what it looks like if I remove the SeletionMode property and add a check box to my ItemTemplate. As you can see there is a huge gap between the check box and the area where the image will be due to the Checkbox control's minimum width of 120.
Any suggestions would be greatly appreciated.
You could just set the MinWidth on the Checkbox itself
eg
<StackPanel Orientation="Horizontal">
<CheckBox x:Name="MyCheck" IsChecked="True" MinWidth="30"/>
<Rectangle Fill="Red" Width="100" Height="50"/>
</StackPanel>
The alternative is creating a copy of the Checkbox Styles and Template but that seems like overkill here.
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).
I'm trying to make a watermark appear inside a TexBox, I have done this with the Canvas tag:
<Canvas Height="60" Width="500" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,5">
<TextBox Width="500" Height="30" Canvas.Left="0" Canvas.Top="0" FontSize="18"></TextBox>
<TextBlock x:Name="whereAreyouWatermark" Canvas.Left="15" Canvas.Top="7" Height="30" FontSize="16"
Foreground="#777777" Width="500">
<Run x:Uid="text2"></Run> <Italic FontSize="13"><Run x:Uid="text3"></Run></Italic>
</TextBlock>
</Canvas>
However, now when the cursor goes over the textblock it's not the "I" icon, just a normal pointer. In CSS, I would change the cursor like this "pointer: text".
How can I do this in XAML?
Also, when pressed I want focus to go to the background textbox, I take it the best way is to just intercept the gotfocus event of the textblock and pass focus in-code to the textbox. I think in iOS you can use a layer which simply passes through events.
thanks very much
Much obliged to ya, as we say all the time in London ;-)
I recommend having a look at the WinRT XAML Toolkit's WatermarkTextBox.
Set the default text to something and once it got focus event, clear the text with whatever the user types. And when it's LostFocus place the watermark again. Your IBeam cursor will not be a problem with this solution.
Simpler solution would be to set some default text (which will serve as a watermark) to the TextBox. On GotFocus event, clear the text from code behind. On LostFocus event, check whether if the user has entered some text or the TextBox is empty. If it has some user text, let it be. If it is empty, place back the watermark text!
I have the following snippet:
<StackPanel>
<Popup>
<TextBox ToolTip="Edit current date"/>
</Popup>
<Label "Current Date"/>
</StackPanel>
I want the popup to show when the StackPanel is clicked, and hidden when it (the Popup) loses focus.
I was wondering what would be the shortest way to write this in xaml.
To do this with an animation, use BooleanAnimationUsingKeyFrames. The example shows how to animate the IsEnabled property but will work equally well with Popup.IsOpen. (You'll need to scroll waaaay down to see the XAML example.) Take care about the FillBehavior so that the Popup doesn't animate back to being closed when the animation ends (unless of course this is what you want!).