Windows 2012 Hosting - MVC 6 and SQL 2014 BLOG

Tutorial and Articles about Windows Hosting, SQL Hosting, MVC Hosting, and Silverlight Hosting

Silverlight 5 Hosting - ASPHostPortal :: PivotViewer Custom DetailPaneStyle in Silverlight 5

clock April 24, 2012 07:08 by author Jervis

One of the added API features of the new Silverlight 5 PivotViewer is the ability to define a custom detail pane. It is rather simple to replace the style with your own, however, then you are left with the task of implementing several features that you most likely want to keep (like when to show and hide your detail pane). There are also a few other states and navigation features that would also be nice to keep. We will look at how you can replace the default implementation with the smallest amount of code and keep the functionality that you will want to keep.

In order to keep from reinventing the wheel when implementing our new detail pane, we are going to start off with the
PivotViewerDetailPane control. This is the control that is being used in the default implementation. By using our own instance of the control, we are able to take advantage of all of that hard work the PivotViewer team has done for us.

The first thing we need to do is see how to implement our own copy of the control. You can override the default implementation by setting the DetailPaneStyle property on the PivotViewer. Here is what an example would look like :


<pivot:PivotViewer x:Name="pViewer">
    <pivot:PivotViewer.DetailPaneStyle>
        <Style TargetType="pivot:PivotViewerDetailPane">
        </Style>
    </pivot:PivotViewer.DetailPaneStyle>
</pivot:PivotViewer>


This simply sets the
DetailPaneStyle to a basic implementation of the PivotViewerDetailPane. However, if we run our example, we soon see that it is close, but not quite the default we are looking for. Now the good news is that we have proved to we have overridden the default.



With a bit more research, you will see that you need to set some default colors. Here are the colors that are originally set:


<
pivot:PivotViewer.DetailPaneStyle>
    <Style TargetType="pivot:PivotViewerDetailPane">
        <Setter Property="Foreground"
                Value="{Binding Foreground,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="Background"
                Value="{Binding Background,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="BorderBrush"
                Value="{Binding BorderBrush,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="AccentColor"
                Value="{Binding AccentColor,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="Background"
                Value="{Binding SecondaryBackground,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="ControlBackground"
                Value="{Binding ControlBackground,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="SecondaryForeground"
                Value="{Binding SecondaryForeground,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="PrimaryItemValueBackgroundColor"
                Value="{Binding PrimaryItemValueBackgroundColor,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="SecondaryItemValueBackgroundColor"
                Value="{Binding SecondaryItemValueBackgroundColor,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
    </Style>
</pivot:PivotViewer.DetailPaneStyle>


As you can see, the detail pane is using the new Silverlight 5 Feature RelativeSource binding to carry the theme colors of the PivotViewer to the detail pane. Obviously, this gives you an opportunity to create your own custom colors if you so choose. If not, it gets us back to the starting point.




Now that we are at a good starting point, let’s figure out what we want to modify. Most of the people I have talked to are only interested in modifying the contents of the detail pane itself and not the entire shell. So we will focus this discussion on the modifying the
ContentTemlate of the PivotViewerDetailPane.



When you replace the
ContentTemplate there are a couple of things you need to remember. The first is the default width of the original template is 190px. The detail pane will grow to accommodate any size that you need, but that is what the default is. The other thing to remember is a bit tricky, and that is the visibility of the contents. If you do not collapse your container by default, then it will be visible while the PivotViewer is loading. It causes a weird user experience and should be handled. We can handle that with a multi-part binding. First we bind the Visibility to the IsShowing property of the PivotViewerDetailPane. We have to write a value converter to change the bool IsShowing to a Visibility. If you haven’t had to do that before, it’s a handy little converter to keep in your toolkit.

public class BoolToVisibilityConverter : IValueConverter
{

    public object Convert(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {
        if(value is bool)
        {
            return (bool) value ?
                    Visibility.Visible :
                    Visibility.Collapsed;
        }

        return Visibility.Collapsed;
    }

    public object ConvertBack(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}


Now you are able to set up your custom detail pane. Here is very simple example using a dummy data set that has a
Color property in it. We are replacing the default content with an Ellipse that is filled with the Color property of our object.

<Setter Property="ContentTemplate">
    <Setter.Value>
        <DataTemplate>
            <Grid Width="190"
                Visibility="{Binding IsShowing,
                RelativeSource={RelativeSource
                AncestorType=pivot:PivotViewerDetailPane},
                Converter={StaticResource boolConv},
                FallbackValue=Collapsed}">
                <Ellipse Width="100" Height="100"
                         Fill="{Binding Color}"
                         VerticalAlignment="Top"
                         Margin="0,30,0,0"/>
            </Grid>
        </DataTemplate>
    </Setter.Value>

</Setter>




Obviously this is a rather simplistic detail pane, so feel free to make yours a bit more complex and interesting.


Get Silverlight 5 Hosting with only $2.00/month at ASPHostPortal.com.



ASP.NET MVC 3 Hosting - ASPHostPortal :: User Activity logging in ASP.NET MVC app using Action Filter and log4net

clock April 6, 2012 07:59 by author Jervis

In this post, I will demonstrate how to use an action filter to log user tracking information in an ASP.NET MVC app. The below action filter will take logged user name, controller name, action name, timestamp information and the value of route data id. These user tracking information will be logged using log4net logging framework.

public class UserTrackerAttribute : ActionFilterAttribute, IActionFilter

{         


    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
        var actionDescriptor= filterContext.ActionDescriptor;
        string controllerName = actionDescriptor.ControllerDescriptor.ControllerName;
        string actionName = actionDescriptor.ActionName;
        string userName = filterContext.HttpContext.User.Identity.Name.ToString();
        DateTime timeStamp = filterContext.HttpContext.Timestamp;
        string routeId=string.Empty;
        if (filterContext.RouteData.Values["id"] != null)
        {
            routeId = filterContext.RouteData.Values["id"].ToString();
        }
        StringBuilder message = new StringBuilder();
        message.Append("UserName=");
        message.Append(userName + "|");
        message.Append("Controller=");
        message.Append(controllerName+"|");
        message.Append("Action=");
        message.Append(actionName + "|");
        message.Append("TimeStamp=");
        message.Append(timeStamp.ToString() + "|");
        if (!string.IsNullOrEmpty(routeId))
        {
            message.Append("RouteId=");
            message.Append(routeId);
        }
        var log=ServiceLocator.Current.GetInstance<ILoggingService>();
        log.Log(message.ToString());
        base.OnActionExecuted(filterContext);
    }
}

The LoggingService class is given below


public class LoggingService : ILoggingService

    {
        private static readonly ILog log = LogManager.GetLogger
            (MethodBase.GetCurrentMethod().DeclaringType);
        public void Log(string message)
        {
            log.Info(message);
        }
    }
    public interface ILoggingService
    {
        void Log(string message);
    }

The LoggingService class is using log4net framework for logging. You can add reference to log4net using
NuGet.

The following command on NuGet console will install log4net into your ASP.NET MVC app.

PM> install-package Log4Net

The below configuration information in web.config will configure log4net for using with Sql Server

Let me add a log4net section to the <configSections> of web.config

<section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler,Log4net"/>

The below is the log4net section in the web.config file

<log4net>
    <root>
      <level value="ALL"/>
      <appender-ref ref="ADONetAppender"/>
    </root>
    <appender name="ADONetAppender" type="log4net.Appender.AdoNetAppender">
      <connectionType value="System.Data.SqlClient.SqlConnection, System.Data, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
      <connectionString value="data source=.\SQLEXPRESS;Database=MyFinance;Trusted_Connection=true;" />
      <commandText value="INSERT INTO Log ([Date],[Thread],[Level],[Logger],[Message]) VALUES (@log_date, @thread, @log_level, @logger, @message)" />
      <parameter>
        <parameterName value="@log_date" />
        <dbType value="DateTime" />
        <layout type="log4net.Layout.PatternLayout" value="%date{yyyy'-'MM'-'dd HH':'mm':'ss'.'fff}" />
      </parameter>
      <parameter>
        <parameterName value="@thread" />
        <dbType value="String" />
        <size value="255" />
        <layout type="log4net.Layout.PatternLayout" value="%thread" />
      </parameter>
      <parameter>
        <parameterName value="@log_level" />
        <dbType value="String" />
        <size value="50" />
        <layout type="log4net.Layout.PatternLayout" value="%level" />
      </parameter>
      <parameter>
        <parameterName value="@logger" />
        <dbType value="String" />
        <size value="255" />
        <layout type="log4net.Layout.PatternLayout" value="%logger" />
      </parameter>
      <parameter>
        <parameterName value="@message" />
        <dbType value="String" />
        <size value="4000" />
        <layout type="log4net.Layout.PatternLayout" value="%message" />
      </parameter>
    </appender>
  </log4net>


Configure log4net

The below code in the Application_Start() of Global.asax.cs will configure the log4net

log4net.Config.XmlConfigurator.Configure();


The below Sql script is used for creating table in Sql Server for logging information

CREATE TABLE [dbo].[Log] (
[ID] [int] IDENTITY (1, 1) NOT NULL ,
[Date] [datetime] NOT NULL ,
[Thread] [varchar] (255) NOT NULL ,
[Level] [varchar] (20) NOT NULL ,
[Logger] [varchar] (255) NOT NULL ,
[Message] [varchar] (4000) NOT NULL
) ON [PRIMARY]

 



About ASPHostPortal.com

We’re a company that works differently to most. Value is what we output and help our customers achieve, not how much money we put in the bank. It’s not because we are altruistic. It’s based on an even simpler principle. "Do good things, and good things will come to you".

Success for us is something that is continually experienced, not something that is reached. For us it is all about the experience – more than the journey. Life is a continual experience. We see the Internet as being an incredible amplifier to the experience of life for all of us. It can help humanity come together to explode in knowledge exploration and discussion. It is continual enlightenment of new ideas, experiences, and passions


Author Link


Corporate Address (Location)

ASPHostPortal
170 W 56th Street, Suite 121
New York, NY 10019
United States

Sign in