I am using group factory to create groups. I would like the groups to be re sizable. I know that there is a property call auto size but not sure if that would resize elements. I added resize property in my css class for group, the resize shows but it wont work as the group is draggable.
You can use Jquery function to do this.
Apply .resizable() function to your field and it'll become resizable
Related
I've been working with the FAST toolkit (https://fast.design) creating my own elements that I wish to use. Part of that journey has lead me to make a Toolbar.
Been a Toolbar, I want to change the background of the buttons to be transparent (going for a look like: https://fluentsite.z22.web.core.windows.net/components/toolbar/definition. Now I could create another element, i.e. ToolbarButton that extends Button (and any other controls which need the background removed) and it'll work for my purpose. Still, it feels like something I should be able to do as it's a unique trait of the Toolbar.
I'm not sure if it's even possible, but I can't figure it out looking through the documentation and source code on GitHub.
Any advice would be appreciated.
Ref: https://github.com/microsoft/fast/issues/3548
This is a great question. Fortunately, shadow dom itself supports a CSS feature for exactly this scenario. You can use the ::slotted selector in the CSS for your toolbar to select particular elements that are slotted into the toolbar's slots and apply custom styles to them. So, you could target a button that is slotted into the toolbar and use that to set a css property on the button, or apply styles directly to it or its CSS parts. Here's the link to the MDN docs on this: https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
Here's some sample css based on your scenario.
::slotted(fast-button) {
--accent-fill-rest: transparent;
}
Remember, this must go into the toolbar's css to affect all fast-button elements that get slotted into the toolbar's slots.
I am new to Windows Phone Programming. In my application, I Have a listbox which lists the phone contacts. Currently it is listed as a regular list with equal size for list items in the UI.I am looking to modify the front end like this :
I dont want to have different sizes /back ground color for each list items rather a fixed UI and let the lists scroll through it and the list item in the view, at any time, should be displayed as in the picture.
I dont expect any codes as answers but any examples are welcome too, just want to know using what feature this kind of functionality is possible so that i can do my reading!
Thanks,
Deepak
It would be difficult to modify an existing control (ListBox for example) to act like this, so your best bet would probably be an ItemsControl with its RenderTransform set as a TranslateTransform.
If you place a Rectangle (with Fill="Transparent") over the ItemsControl, you can attach handlers to the ManipulationStarted, ManipulationDelta, and ManipulationCompleted events to control the "scrolling" by setting the TranslateTransform's Y offset.
To resize the items in the list there are two options: a custom panel or manual setting.
Custom Panel
You could create a custom Panel implementation that will appropriately resize its Children based on a property you would create to represent the scroll position. Set the ItemsControl to use your panel, and either through binding or attaching a handler to the panel's Loaded event and keeping a pointer to the panel, update the aforementioned property from inside the ManipulationDelta handler.
Manual Setting
From inside of the ManipulationDelta handler, you can also calculate the various heights of the boxes and use MyItemsControl.ItemContainerGenerator.ContainerFromIndex to get the visual for each item and set its height.
I would suggest putting this all inside of a custom UserControl.
You may have issues with clipping using the TranslateTransform but hopefully this will get you started. Unfortunately, this looks like a rather difficult control to try making as your first windows phone project!
So Finally I did manage to find a way to do it.
First approach was as #Murkaeus suggested, Using UserControl and ManipulationDelta event handler. However for some reason the manipulationDelta event was triggered only for 2 finger gestures (Zoom, Pinch..etc), I have no clue why. And after some trying I had to give up on this.
The next approach was using Listbox itself. The source of the Listbox was set as the List( of Models objects) that I create after reading the contact information from phone. The height and color of the listbox item was bound to a property in my model named "scaleLevel" and was accordingly converted by implementing IValueConvertors to give predefined color and height values for different scale levels.
I created an attached property for the scrollviewer vertical offset like mentioned [here] (http://www.scottlogic.co.uk/blog/colin/2010/07/exposing-and-binding-to-a-silverlight-scrollviewer%E2%80%99s-scrollbars/)!
This event is triggered on change of the vertical offset and every time there is a scroll, I find out which listbox item to be enlarged and which reduced based current vertical offset.
Once I have this information, I change the property ("scaleLevel") of the affected items in the List (of Model) (which is bound to listbox height and color). This change is updated in UI using the INotifyPropertyChanged Event.
I have no idea if this the best way of doing it , but it works well and there is no considerable in updating the UI despite the processing involved.
I would like to hear your opinion about the implementation and any other solution which you feel will work better.
I have a expandable listview with textviews as rows and a webview as a child of each row (group). when user cliked on a group (row) webview with html loaded. after scrolling the webview towards end and then clicking another row doesnot show the group at top. it automatically scrolls down.
I want to scroll upwards so till currently selected group is at top.
thanks
You need to implement OnGroupClickListener with return value true to prevent event flow. In the OnGroupClick you can use setSelectionFromTop(groupPosition, 0); to move just expanded group to the top of ExpandableListView. Also you need to call expandGroup() and collapseGroup() in the listener. But you should note what you will override general behavior of ExpandableListView in ItemClick event with expanding and collapsing groups, such as animate and etc.
listView.setSelectedChild(selectedGroupNo, selectedChildNo, true);
does the trick.
I'm trying to make the cells of a QTableView look like 3D clickable buttons. So that when you click on a cell, the button looks pushed. Everyone seems to think I merely want to change the colour, I need to show images of a normal button, and a pushed button, that look 3-dimensional.
I have done this already with calling QTableView::setItemDelegate(), with an appropriate ItemDelegate that will change the background of the cell when it's clicked. However I'm stuck at this point because I want some cells to be different coloured buttons based on the data they contain. So a cell with a low number would be a red button, that's also red when it's clicked, and the other cells would be different colours.
I can set the colour of the button with the TableModel, but once the button is clicked, there is no way for the ItemDelegate to know that it's supposed to be a different colour than the rest. How can you link the two so the ItemDelegate knows what colour it's supposed to be?
Also, is there simply a better way to make cells look like buttons?
You can call QModelIndex::model() from within the ItemDelegate's paint() method, since it has a QModelIndex parameter. This gives you the TableModel for the data, which you can programatically decide what colour the cell's button will be.
However, this is still not as elegant as I'd hope. Does anyone know a better way to change the appearance of table cells when in both the up and down button push states?
Why don't you asked the index for the background color.
Something like this ...
QStyleOptionToolButton buttonOption;
const QStyleOptionViewItemV4& optionV4 = dynamic_cast<QStyleOptionViewItemV4&>(option);
//...
buttonOption.palette.setBrush( QPalette::Button, index.data( Qt::BackgroundColorRole ) );
//...
I have feeling that its a bug in Qt and its must have been ...
// model code
if(role==Qt::BackgroundColorRole )
return qvariant_cast<QBrush>( QBrush(Qt::red) );
// delegate code
buttonOption.palette.setBrush(QPalette::Button, optionV4.backgroundBrush );
Because the optionV4.backgroundBrush is correct in the sizeHint method but is invalid in the paint method . I see now reason why the sizeHint should have the background brush and the paint method not. I'll report it to Nokia.
EDIT:
Looks like I was right and its a bug in < Qt4.5.
QStyleOptionViewItemV4 doesn't copy the icon and backgroundBrush
Can you not get the ID/row count of the table cell's row and then check it against the colour table that you may be having, and set the colour accordingly? I am not sure if I understood your question well or not.
Assign a data role for the background color, and in your item delegate, ask the model index what it's background color is (using data( bg_color_role ) or something similar). Then, in your model, you need to make sure the data function returns a color for the bg_color_role that is appropriate for the data being modeled.
The way to do that is to use the data method of the QModelIndex object you get on the paint method, and ask for a specific role (if you define a custom model, you can add your own roles, and give the information you need to the delegate in those roles.)
TimW, I think you have to fill the QStyleOptionViewItemV4 info by calling initStyleOption before.
I'm not sure where the requirement for a background image comes from. If you want the cells to look like QPushButtons, you should probably inherit from QItemDelegate and implement paint() to use QStyle to draw you a QPushButton, something like this:
QStyleOptionButton opt;
// fill 'opt' from the information from the model, and the style option that's passed in
style()->drawControl( QStyle::CE_PushButton, &opt, painter );
Have you tried using custom style sheets?
You could just apply the same stylesheet to every cell, and then change the background image / style to draw the 3D button images depending on whether or not it's selected.
I have a simple slider, with only 3 options. It seems strange to force the user to drag the small thumbnail on the slider, when it would be a lot easier to click one of the 3 actual labels by the side of the slider. Does anyone know how to accomplish this?
This is a cool problem.
The Label object used by Slider turns out to be a subclass of Label (called SliderLabel). So, probably the best approach would be to subclass Slider and add event listeners to the labels.
I think you could successfully add event listeners in either the commitProperties method or the updateDisplayList method. I'm not sure if one would be preferable to the other, but commitProperties seems like the more correct choice.
So, in your subclass of Slider:
override protected function commitProperties():void
{
super.commitProperties();
for(var i:int = 0; i < labelObjects.numChildren; i++)
{
if(!SliderLabel(labelObjects.getChildAt(i)).hasEventListener(MouseEvent.CLICK))
{
SliderLabel(labelObjects.getChildAt(i)).addEventListener(MouseEvent.CLICK,sliderLabelClickListener);
}
}
}
and then maybe something like this for sliderLabelClickListener:
private function sliderLabelClickListener(e:MouseEvent):void
{
dispatchEvent( new SliderLabelClickEvent(e.target) );
}
I think you'd want a custom event there, rather than dispatching a regular Event, so you could include the name/id/value of the label.
Also, you may want to put in a 'dispose' method to remove the CLICK event listener from the labels when the Slider is removed from the stage. It's not an issue if you aren't going to be removing the Slider, but if you are, what I normally do is create a method called dispose and put all my manual removal logic there (removing event listeners, unwatching/removing ChangeWatchers). Then I assign a listener to the component's REMOVED_FROM_STAGE event and call the dispose method from that listener.
Are you sure a slider is the best component to use in this case? Generally speaking, sliders are to be used when the user has a large range of contiguous options to choose from, where the precision of a user's choice doesn't really matter (e.g. a volume slider - having volume at 51% as opposed to 50% really won't make much of a difference).
If you only have three options, and the user is only allowed to select one of those three options, I would suggest using either a combo box or a radio button group.