Hi,
How can i change the color of a detail view item's caption (in web)?
I tried from the Application Model and even form the code (accessing the ASPxStringPropertyEditor) but all i can edit is the editor control.
Thank You!
How to change a property editor's font size and color in ASP.NET
Show previous comments
(0)
Comments
(0)
Sign in to comment on this post
Answers
created 16 years ago
(modified 10 years ago)
Hello Gerardo,
To change a font used inside a property editor, get the underlying control as shown in the Access Editor Settings topic and customize it as required. Here is an example:
C#public class ChangePropertyEditorFontController : ObjectViewController<DetailView, Contact> {
protected override void OnActivated() {
base.OnActivated();
WebPropertyEditor firstNameEditor = (WebPropertyEditor)View.FindItem("FirstName");
firstNameEditor.ControlCreated += firstNameEditor_ControlCreated;
}
void firstNameEditor_ControlCreated(object sender, EventArgs e) {
WebPropertyEditor propertyEditor = (WebPropertyEditor)sender;
WebControl editor = propertyEditor.ViewEditMode == ViewEditMode.Edit ? propertyEditor.Editor : propertyEditor.InplaceViewModeEditor;
if (editor != null){
editor.ForeColor = Color.Yellow;
}
}
protected override void OnDeactivated() {
base.OnDeactivated();
WebPropertyEditor firstNameEditor = (WebPropertyEditor)View.FindItem("FirstName");
firstNameEditor.ControlCreated -= firstNameEditor_ControlCreated;
}
}
To change a font used for a property editor's caption (outside the property editor), use the WebLayoutManager.ItemCreated event, as shown below:
C#public class ChangePropertyEditorCaptionController : ObjectViewController<DetailView, Contact> {
protected override void OnActivated() {
base.OnActivated();
((WebLayoutManager)View.LayoutManager).ItemCreated += ChangeLayoutGroupCaptionViewController_ItemCreated;
}
void ChangeLayoutGroupCaptionViewController_ItemCreated(object sender, ItemCreatedEventArgs e) {
if (e.ViewItem is PropertyEditor && ((PropertyEditor)e.ViewItem).PropertyName == "FirstName") {
e.TemplateContainer.Load += (s, args) => {
if (e.TemplateContainer.CaptionControl != null) {
e.TemplateContainer.CaptionControl.Font.Size = new FontUnit(10);
}
};
}
}
protected override void OnDeactivated() {
base.OnDeactivated();
((WebLayoutManager)View.LayoutManager).ItemCreated -= ChangeLayoutGroupCaptionViewController_ItemCreated;
}
}
Thanks,
Anatol
Comments
(3)
Hello Gerardo,
In XAF Web applications, the Literal control is used to display captions in DetailView. This control doesn't support changing background and text color. To accomplish your task, you need to replace this control with another, for example, the Label control, as shown in the following code:
C#public class ViewController1 : ViewController {
public ViewController1() {
TargetViewId = "DomainObject1_DetailView";
}
protected override void OnActivated() {
base.OnActivated();
View.ControlsCreated += new EventHandler(View_ControlsCreated);
}
void View_ControlsCreated(object sender, EventArgs e) {
WebPropertyEditor propertyEditor = (WebPropertyEditor)((DetailView)View).FindItem("Name");
TableCell cell = ((TableRow)((Control)propertyEditor.Control).Parent.Parent).Cells[0];
Literal literal = (Literal)cell.Controls[0];
literal.Visible = false;
Label label = new Label();
label.ForeColor = Color.Red;
label.Text = literal.Text;
cell.Controls.Add(label);
}
}
You can also mark the required field with bold text. In this case, you don't need to use the ViewController and change the control, because the Literal control supports this functionality out of the box. Simply decorate the caption of the corresponding detail view item in the Model Editor with the <b> tag.
Please let me know in case of any difficulties.
Thanks,
Anatol
In the current version, the recommended way to change the background color is to use the Conditional Appearance module. It is possible to declare Conditional Appearance rules in the Model Editor - see Declare Conditional Appearance Rules in the Application Model.
Alternatively, you can extend default model nodes with the BackColor property and change controls based on this property. See more information about this approach here: How to: Extend the Application Model.