(WPF MVVM) I am trying to make a Pause/Play button using my own Style and combination of ContentTemplate->StaticResource->DataTemplate. I set the DataTemplate to a vector graphic data. I have prepared 2 vector graphics for Pause-Button and for Play-Button.
My target: if I click the Pause-button the ContentTemplate will be "switched" to Play-Button-DataTemplate and the button becomes Play-Button.
I know that I need to bind Click-event of the button or use RelayCommand to do Pause/Play operation (in my code snippet I have not bound the Click event), but I don't know how to bind the ContentTemplate to get the effect I need. Thank you in advance.
<controls:MyButton x:Name="btnPause" AutomationProperties.Name="btnPause" Style="{StaticResource MyButtonStyle}" ContentTemplate="{StaticResource dtmpPause}" />
<DataTemplate x:Name="dtmpPause">
<Path x:Name="pathPause" Fill="White" Stretch="Uniform" Data="M314.00598,126.271 L379.52698,126.271 L379.52698,440.672 L314.00598,440.672 z M187.40198,126.271 L252.92398,126.271 L252.92398,440.672 L187.40198,440.672 z M283.45901,34.240997 C146.03,34.240997 34.229004,146.043 34.229004,283.45697 C34.229004,420.88702 146.03,532.70099 283.45901,532.70099 C420.88699,532.70099 532.70203,420.88702 532.70203,283.45697 C532.70203,146.043 420.88699,34.240997 283.45901,34.240997 z M283.45901,0 C439.772,0 566.92999,127.158 566.92999,283.45697 C566.92999,439.771 439.772,566.94299 283.45901,566.94299 C127.15799,566.94299 0,439.771 0,283.45697 C0,127.158 127.15799,0 283.45901,0 z"/>
</DataTemplate>
<DataTemplate x:Name="dtmpPlay">
<Path x:Name="pathPlay" Fill="White" Stretch="Uniform" Data="M269.00003,121.50002 L298.00003,121.50002 L298.00003,445.50003 L269.00003,445.50003 z M283.5,41.621429 L41.620132,283.50198 L283.5,525.37958 L525.37982,283.50198 z M283.5,0 L566.99994,283.50198 L283.5,567 L0,283.50198 z"/>
</DataTemplate>
Use DataTemplateSelector which allows you to pick the DataTemplate you wish by defined condition, which you implement however you wish.
Here is an example:
public class TaskListDataTemplateSelector : DataTemplateSelector
{
public override DataTemplate
SelectTemplate(object item, DependencyObject container)
{
FrameworkElement element = container as FrameworkElement;
if (element != null && item != null && item is Task)
{
Task taskitem = item as Task;
if (taskitem.Priority == 1)
return
element.FindResource("importantTaskTemplate") as DataTemplate;
else
return
element.FindResource("myTaskTemplate") as DataTemplate;
}
return null;
}
}
in this example you return whatever DataTemplate you wish based on what priority your DataContext has.
In xaml you will need to tell the control what DataTemplateSelector it should use:
<ListBox Width="400" Margin="10"
ItemsSource="{Binding Source={StaticResource myTodoList}}"
ItemTemplateSelector="{StaticResource myDataTemplateSelector}"
HorizontalContentAlignment="Stretch"/>
In this case myDataTemplateSelector will be used by the ListBox.
In your case its the MyButton.
Related
In my HTML code I have:
<animate id= animationBottle attributeName="y1"
from="101%"
to="70%"
begin="0s"
dur="1s"
fill="freeze">
</animate>
Is there a way to make the 'to="70%"' variable with JS?
Thanks in advance!
You can use set the value (70%) of the attribute ("to") with Javascript.
document.getElementById("animationBottle").setAttribute("to", "70%");
If you have the value of 70 as a variable (var value = 70) and want to use that with the setAttribute, you do the following:
var value = 70;
var value_perc = `${value}%`;
document.getElementById("animationBottle").setAttribute("to", value_perc);
You could also make a function with the number as input.
I want to manipulate an SVG object with blazor, is it possible to do this via C# client side, or do I need to use javascript.
For example, draw a line programatically based on clicks in the SVG area.
Any pointers would be greatly appreciated. I found a lot on adding SVG component, but nothing on adding elements to the already existing svg component
You can use SVG file contents as the markup in a Blazor component, and then do any of the Blazor-y things you'd normally do.
Put a variable in the svg markup, and build it as a string.
Here's a highly-simplified excerpt:
(MySvgComponent.blazor)
<svg blah blah blah>
<polyline fill="none" stroke="#0074d9"
stroke-width="2" points="#PointString" />
</svg>
#code {
public string #PointString {get;set;}
public void AddPoint (int X, int Y){
#PointString += " " + X + "," + Y;
}
You'll have to add your own code to figure out where you want to add the points. You could make a List<Point> parameter to pass in from a parent or something, and then call AddPoint in a foreach loop in OnInitialized(). You could also very easily replace the stroke color or anything else by replacing literals like "0074d9" with variables "#myColorString."
Handling mouse-click locations will require some fancy JS work. Try using Javascript Interop with something like the following:
How to get the click coordinates relative to SVG element holding the onclick listener?
I have a requirement to set color for the grid column filed based on condition.
For example: I have two fields in grid
1. Sales Price
2. New Sales
I want to show Green color if Sales price and New Sales value is same
else want to show red color if Sales price is higher than New Sales
else want to show Yellow color if Sales price is lower than New Sales.
This is not a generic inquiry screen, this is like processing screen using FormDetal Template in header i have some filter values based on that my grid data will get load on that i will modify price fields as mention above example "New Sales" field i will modify and it is unbound field "Sales" field is bound
so in the line item of grid if modify new sales then need to compare sales and New sales if both value are same then particularly for the NewSales field i need to show Green color.
I tried below code in my page file, but when i debug it didn't call this grid1_RowDataBound event
protected void Page_Load(object sender, EventArgs e)
{
//Create needed styles here
Style style = new Style();
style.Font.Bold = true;
this.Page.Header.StyleSheet.CreateStyleRule(style, this, "." + "BoldText");
Style style1 = new Style();
style1.ForeColor = System.Drawing.Color.FromArgb(50, 180, 50);
this.Page.Header.StyleSheet.CreateStyleRule(style1, this, "." + "GreenColor");
}
protected void grid1_RowDataBound(object sender, PX.Web.UI.PXGridRowEventArgs e)
{
// Take DataItem and convert it to your DAC object type
// KWUpdateStylePricing is my DAC name
KWUpdateStylePricing row = e.Row.DataItem as KWUpdateStylePricing;
if (row != null && row.WholeSalePrice == row.NewWholeSalePrice)
{
e.Row.Style.CssClass = "GreenColor";
}
}
Aspx page Grid properties
<px:PXGrid ID="grid1" runat="server" DataSourceID="ds" Style="z-index: 100; left: 0px; top: 0px; height: 385px;" Width="100%" NoteIndicator="false" FilesIndicator="false"
BorderWidth="0px" OnRowDataBound="grid1_RowDataBound" SkinID="DetailsInTab" SyncPosition="True" StatusField="MyAvailability" RepaintColumns="true" Height="385px" TabIndex="7700" AllowPaging="true" AdjustPageSize="Auto" AllowSearch="true" AllowAutoHide="false">
Thanks in advance.
It depends on the screen. If your screen is a generic inquiry, you should
go to the Generic Inquiry designer screen
open the needed Generic Inquiry
Open Results Grid tab
You can define Row Style or cell style formula in Row Style or Style field
If your screen is not a generic inquiry, you'll need to have code that assigns the style to the cell/row in the corresponding aspx.cs file
public partial class Page_YourPage : PX.Web.UI.PXPage
{
protected void Page_Load(object sender, EventArgs e)
{
//Create needed styles here
Style style = new Style();
style.Font.Bold = true;
this.Page.Header.StyleSheet.CreateStyleRule(style, this, "." + "BoldText");
Style style1 = new Style();
style1.ForeColor = System.Drawing.Color.FromArgb(50, 180, 50);
this.Page.Header.StyleSheet.CreateStyleRule(style1, this, "." + "GreenColor");
}
protected void grid1_RowDataBound(object sender, PX.Web.UI.PXGridRowEventArgs e)
{
// Take DataItem and convert it to your DAC object type
GridObjectType row = e.Row.DataItem as GridObjectType;
if (item != null && item.SomeField == true)
{
e.Row.Style.CssClass = "GreenColor";
}
}
In the aspx file you'll need to define that event, e.g.
<px:PXGrid ID="grid1" runat="server" DataSourceID="ds" OnRowDataBound="grid1_RowDataBound" ... >
You can also check this article:
http://asiablog.acumatica.com/2016/12/using-colors-in-acumatica.html
I've had trouble assigning a row to a class. As a result, I assign the row cell to an object and then perform my logic. Try something like the code below and see if it works.
protected void grid_RowDataBound(object sender, PX.Web.UI.PXGridRowEventArgs e)
{
Object wholesaleprice = e.Row.Cells["WholeSalePrice"].Value;
Object newwholesaleprice = e.Row.Cells["NewWholeSalePrice"].Value;
if (wholesaleprice != null
&& newwholesaleprice != null
&& ((decimal)wholesaleprice) == ((decimal)newwholesaleprice))
{
e.Row.Style.CssClass = "GreenColor";
}
}
how do I get item on listbox hold event in windows phone?
suppose I have three items in listbox,
1 - abc
2 - def
3 - ghi
If I hold on item "abc" then how do I get that item?
May be this helps you.
<ListBox x:Name="lstBoxTemp" Hold="lstBoxTemp_Hold">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
.......
........
Your template
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
private void lstBoxTemp_Hold(object sender, System.Windows.Input.GestureEventArgs e)
{
var item= (Cast as YourType)(sender as ListBox).DataContext;
}
This would help you to get list item on hold event:
private void lst_Hold_1(object sender, System.Windows.Input.GestureEventArgs e)
{
string text = (e.OriginalSource as TextBlock).Text;
}
Hi have a folding panel as one of the components of the divider box. It can be expanded and collapsed, and the divider box adjust itself on expand/collapse.
But once i manually move/adjust the divider the divider box doesn't auto-adjust when i collapse the panel. Empty space id hence created. Any help appreciated
i think you should use resizeToContent property of DivideBox
check the following code
<mx:HDividedBox width="500" height="200" resizeToContent="true"/>
resizeToContent property is used to adjust your container according to the child width, height
when you collaps the panel, according to the new height and width, a dividebox will adjust it self.
resizeToContent was set true. And it is working fine until I adjust the divider. Once it is adjusted, it wont get re-sized with the child size.
resizeToContent property will work when user not set width or height propery to container in above HDivdebox i set width and height propery thats why it doesn't work...
try following code...
here in below code i use HDivideBox and TitleWindow as its child... TitleWindow has its own height and width and HDivideBox's resizeToContent property is set to true. when user click on close button it's width decrease and HDivideBox is resize itself according to childrens total width
protected function t1_closeHandler(event:CloseEvent):void
{
t1.width = 50;
}
protected function t2_closeHandler(event:CloseEvent):void
{
t2.width = 50;
}
<mx:HDividedBox resizeToContent="true">
<mx:TitleWindow id="t1" width="150" height="100" showCloseButton="true" close="t1_closeHandler(event)"/>
<mx:TitleWindow id="t2" width="150" height="100" showCloseButton="true" close="t2_closeHandler(event)"/>
</mx:HDividedBox>