I have a TextBlock in my XAML page. The text that goes into that TextBlock is dynamic and can be any number of characters. Initially I keep TextWrapping = Wrap. But when I click on the TextBlock, I switch TextWrapping to NoWrap by using the Tapped event on the TextBlock and clicking it again switches it back to Wrap. So essentially Tapped event on the TextBlock toggles between Wrap and NoWrap. This allows me to expand the TextBlock to read the whole text in it.
This is all good. Now what I am trying to do is to show some indication inside the TextBlock that tells whether some text inside the TextBlock is getting wrapped so that the user can click on the TextBlock and expand it to read the whole thing. The indication I wanted to show was something like 3 dots at the end of the TextBlock if the text is getting wrapped.
For example if the text inside the TextBox is
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit"
but because TextWrapping = Wrap, it is getting wrapped after the word 'est' , then I want the content of the TextBlock to be something like this:
Neque porro quisquam est...
(notice the 3 dots after the word est)
How do I achieve this? ( if possible ).
I believe you are simply looking for the TextTrimming property of the TextBlock.
Pick either CharacterEllipsis or WordEllipsis to suit you need.
Related
I have a grid with multiple buttons as children. Now I want to give this Grid rows a background color. So I added a border with a background color like this
Border brd = new Border
{
Margin = new Thickness(0, 2, 0, 2),
Background = (SolidColorBrush) Application.Current.Resources["RedBrush"],
CornerRadius = new CornerRadius(22),
};
Grid.SetColumn(brd,startColumn);
Grid.SetColumnSpan(brd, 9- startColumn);
Grid.SetRow(brd, startRow);
GridMain.Children.Add(brd);
All looks good to me, But when this is rendered all buttons are hidden as the Background color of Border only is visible in the row. How can I overcome this?
Instead of adding the Border from code behind, If I added in Xaml all works fine (border background is visible as button background and button text is visible)
<Border Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="8" Background="{StaticResource RedBrush}" CornerRadius="22" Margin="0 2 0 2" />
But for various reasons I wan the ability to add this border from code behind itself.
If you want to set the background color for Grid, you can directly use Grid.Background to set, without adding a new Border.
But if you need to add a Border as a background, please pay attention to the calling sequence in the code.
Generally speaking, the element added later will be placed on the top layer of the previous element, forming a visual effect of covering.
From your problem description. You can put the code that adds Border first.
Thanks.
When developing a QML application I think it can sometime be useful if I was able to set some setting to outline all visual elements boundaries. For instance a control in Qt Quick Controls 2.x might consist of several parts like background, contentItem, indicators etc. When tweaking on the size of these I would like to see the boundaries of each of these parts.
Is there any functionality like this in Qt/QML?
Three years later, and folks (specifically: me) are still doing web searches about this :)
Just like commenter #DuKes0mE suggested, I have "made do" by adding borders to things on-the-fly and then removing them from the final code.
Like the OP, I am now tired of doing that.
A tactic I arrived at recently is to add a DebugRectangle.qml custom element to my project:
import QtQuick 2.12
Rectangle {
property var toFill: parent // instantiation site "can" (optionally) override
property color customColor: 'yellow' // instantiation site "can" (optionally) override
property int customThickness: 1 // instantiation site "can" (optionally) override
anchors.fill: toFill
z: 200
color: 'transparent'
border.color: customColor
border.width: customThickness
}
Then I can add it to existing elements like so, to debug them:
Label {
text: 'Lorem ipsum dolor sit amet'
}
Label {
text: 'quis nostrud exercitation'
DebugRectangle {} // Adds "debug border" to this Label
}
And when I am finished, I can even leave the nested DebugRectangle in the code, but toggle its visibility like so:
Label {
text: 'quis nostrud exercitation'
DebugRectangle {
visible: false
}
}
Complete sample project shared on GitHub.
There's a tool called GammaRay which (amongst other things) allows investigating QtQuick 2 applications, see:
http://doc.qt.io/GammaRay/gammaray-qtquick2-inspector.html
Setup instructions are here:
https://github.com/KDAB/GammaRay
If you're running Linux, it is quite likely your distribution already ships a GammaRay package.
I have created a simple Layout control using the Dojo Content Pane Border Container and Border Pane.
<xe:djContentPane id="djContentPane1" style="width:auto; height:500px;">
<xe:djBorderContainer id="djBorderContainer1">
<xe:djBorderPane id="djBorderPane1" region="top">Header
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane2" region="center">Main
Body
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane3" region="bottom">Footer
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane4" region="left"
style="width:auto">main Navigator
</xe:djBorderPane>
</xe:djBorderContainer>
</xe:djContentPane>
It does pretty much what I want (obviously no styling on it at this point) except for two things:
1. I can't figure out how to make the djContentPane fill the full space available on the screen. The width:auto works but there does not appear to be a corresponding height specification.
2. I added a repeat control view into the region="center" and it displays fine except when the content exceeds the height available there is no scrollbar. I think as I read some of the help this should be the default for the "center" djBorderPane. Do I have to define the scrollbar?
ad 1.: use height:100% instead of "auto"; works fine for me, at least using Firefox (haven't tried other browsers)
ad 2.: I put a panel around the repeat as recommended in my above comment. Then I added overflow:auto; as a style property to the panel. Instead of using an extra panel you also could add that to the repeat itself, but I usually prefer styling an outer div because sometimes you want to set the removeRepeat property and then lose its own styling possibilities. Here's my portion of the border panel's code:
<xe:djBorderPane id="djBorderPane2" region="center">Main Body
<xp:panel id="outerDiv" style="width:100%;height:100%;overflow:auto;">
<xp:repeat id="repeat1" rows="30" var="rowData">
<xp:this.value>
<![CDATA[#{javascript:["row1", "row2", "row3", "row4"]}]]>
</xp:this.value>
<xp:panel id="innerDiv">
<xp:text escape="true" id="computedField1" value="#{javascript:rowData}">
</xp:text>
</xp:panel>
</xp:repeat>
</xp:panel>
</xe:djBorderPane>
again, works fine for me
The following image shows proper alignment for the mblDomButtonWhitePlus icon for the xe:toolBarButton on the left, but not so good on the right in the xe:djxmHeading.
Here is the source for the Page Heading control:
<xe:djxmHeading id="djxmHeading1" label="appPage1">
<xe:toolBarButton id="toolBarButton3" moveTo="appPage2">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="icon" value="mblDomButtonWhitePlus">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:toolBarButton>
<xp:this.facets>
<xe:toolBarButton id="toolBarButton4" moveTo="appPage3"
xp:key="actionFacet">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="icon" value="mblDomButtonWhitePlus">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:toolBarButton>
</xp:this.facets>
</xe:djxmHeading>
Any ideas on how to correct the icon alignment for the xe:toolBarButton in the actionFacet of the Page Heading?
override .mblHeadingActionFacet div {top: 4px;} will drop the plus sign in place... you may need to change top pixels value based on how your div's are positioned (relative for example).
We're using Interface Builder for developing an app for the iPad and we can't figure out how to increase the height of the textfields.
When we were using IB to develop an application for osx, you could go to the textfields attributes and under the control section you could set line break to word wrap instead of clip.
When we try to use Interface Builder for iPad applications though, it doesn't have the option of changing linebreak style under attributes-->control.
Is there any way to set the height using Interface Builder or do you have to set that in the code?
It looks like the height of the rounded-style text field is locked in Interface Builder. My solution was to use another of the UITextField styles in my XIB and then call textField.borderStyle = UITextBorderStyleRoundedRect in my viewDidLoad method.
Of course, textField should be the name of the UITextField IBOutlet.
iOS UITextFields are single line only and have a fixed height.
If you want a multi-line, variable-height text entry field then use UITextView.
1 - Right click on your storyboard/xib file and select "Open as" -> "Source code".
2 - Find the xml tag relative to your TextField, e.g.
<textField opaque="NO" clipsSubviews="YES" tag="102" contentMode="scaleToFill" misplaced="YES" contentHorizontalAlignment="left" contentVerticalAlignment="center" text="6872" borderStyle="roundedRect" placeholder="Password" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="Dxw-lR-kq5">
<rect key="frame" x="20" y="337" width="335" height="30"/>
3 - Change the height value to what you want (e.g. 50)
4 - Right click again on you storyboard and select "Open as" -> "Interface builder"
5 - See the result
there is a wrapping text field,that is what you need.
set the frame of ui textfield object in view did load but it will involve coding
[self.searchText setFrame:CGRectMake(180, 450, 400, 250)];
//in my case the object was called search text...
You can edit the height of any UITextfield in IB.Just set the constraint in IB.Select the constraint.In the Size Inspector-->Select and Edit just change the constant to your desired value.Press Enter ...Done!!!! (Can't get multiline though)