<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition> <!-- 1 -->
<ColumnDefinition></ColumnDefinition> <!-- 2 -->
<ColumnDefinition></ColumnDefinition> <!-- 3 -->
<ColumnDefinition></ColumnDefinition> <!-- 4 -->
<ColumnDefinition></ColumnDefinition> <!-- 5 -->
<ColumnDefinition></ColumnDefinition> <!-- 6 -->
<ColumnDefinition></ColumnDefinition> <!-- 7 -->
<ColumnDefinition></ColumnDefinition> <!-- 8 -->
<ColumnDefinition></ColumnDefinition> <!-- 9 -->
<ColumnDefinition></ColumnDefinition> <!-- 10 -->
<ColumnDefinition></ColumnDefinition> <!-- 11 -->
<ColumnDefinition></ColumnDefinition> <!-- 12 -->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition> <!-- 1 -->
<RowDefinition></RowDefinition> <!-- 2 -->
<RowDefinition></RowDefinition> <!-- 3 -->
<RowDefinition></RowDefinition> <!-- 4 -->
<RowDefinition></RowDefinition> <!-- 5 -->
<RowDefinition></RowDefinition> <!-- 6 -->
<RowDefinition></RowDefinition> <!-- 7 -->
<RowDefinition></RowDefinition> <!-- 8 -->
<RowDefinition></RowDefinition> <!-- 9 -->
<RowDefinition></RowDefinition> <!-- 10 -->
<RowDefinition></RowDefinition> <!-- 11 -->
<RowDefinition></RowDefinition> <!-- 12 -->
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="12">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition> <!-- 1 -->
<ColumnDefinition></ColumnDefinition> <!-- 2 -->
<ColumnDefinition></ColumnDefinition> <!-- 3 -->
<ColumnDefinition></ColumnDefinition> <!-- 4 Center -->
<ColumnDefinition></ColumnDefinition> <!-- 5 -->
<ColumnDefinition></ColumnDefinition> <!-- 6 -->
<ColumnDefinition></ColumnDefinition> <!-- 7 -->
</Grid.ColumnDefinitions>
<Label FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="2">Main</Label>
<Label FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="3">Coins</Label>
<Label FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="4">Converter</Label>
</Grid>
<Grid x:Name="BodyGrid" Grid.Column="0" Grid.ColumnSpan="12" Grid.Row="1" Grid.RowSpan="11">
<Frame Background="Gray"/>
</Grid>
</Grid>
@for (int i = 0; i < Model.Count; i++)
{
<div class="col-sm-3" style="margin-bottom: 5px;">
@{
string backgroundColor = Constants.Colors.EVENT_CUSTOM_TYPE;
string hoverColor = Constants.Colors.EVENT_CUSTOM_BACKGROUND;
switch (Model[i].Type)
{
case EventType.Call:
{
backgroundColor = Constants.Colors.EVENT_CALL_TYPE;
hoverColor = Constants.Colors.EVENT_CALL_BACKGROUND;
break;
}
case EventType.Meeting:
{
backgroundColor = Constants.Colors.EVENT_MEETING_TYPE;
hoverColor = Constants.Colors.EVENT_MEETING_BACKGROUND;
break;
}
case EventType.Process:
{
backgroundColor = Constants.Colors.EVENT_PROCESS_TYPE;
hoverColor = Constants.Colors.EVENT_PROCESS_BACKGROUND;
break;
}
}
}
<a id="user-event-@i" href="@Url.Action("Details", "Event", new { @id = @Model[i].Id })">
<div style="width: 100%; min-height: 110px; border-top: 2px solid #CFCED1; border-left: 1px solid #CFCED1; border-right: 1px solid #CFCED1; background-color: @backgroundColor; cursor: pointer;">
</div>
</a>
</div>
}
a[id|=user-event]:hover {
...
}