UISplitViewController Detail View Drop shadow - ios6

I'm trying to set a shadow on my UISplitViewController's Detail View, that I want to be visible over the Master View, in iOS 6.
In my Detail ViewController:
self.view.layer.shadowColor = [[UIColor blackColor] CGColor];
self.view.layer.shadowOffset = CGSizeMake(-3.0f, 0.0f);
self.view.layer.shadowRadius = 3.0f;
self.view.layer.shadowOpacity = 1.0f;
self.view.layer.masksToBounds = NO;
self.view.clipsToBounds = NO;
However, the SplitVC automatically clips its sub-views, even when I set it to NO in the above code, and there is no shadow.
Can anyone let me know the correct way to achieve this?

The best way I found to do this is to add a 1px view to the master view controller and snap it to the right edge and apply a shadow to that view instead.

It seems that a superview some way down the hierarchy is performing the clipping.
Try this:
UIView *v = self.view;
do
{
v.clipsToBounds = NO;
v = v.superview;
}
while(v != nil);
Be aware that this will turn of clipping for all view in the hierarchy! - This might be more than you asked for:-).

Related

Scroll to selection in Angular ui-grid (not ng-grid)

For my Angular JS grid work, I'm using ui-grid rather than ng-grid as ui-grid is meant to be the new version which is purer Angular.
I've got a grid that I'm populating with a http response, and I'm able to select a row (based on finding the record matching a $scope variable value) using the api.selection.selectRow method call.
What I need to do next is scroll the grid to that record.
There's an existing stack overflow question along the same lines that is for ng-grid and the answer to that refers to undocumented features which are not present in ui-grid so I can't use that approach.
The closest I've got is finding $scope.gridApi.grid to get a reference to the actual grid itself but looking through the properties and methods in the Chrome debugger doesn't show anything that sounds like it could work.
You can use the cellNav plugin. You should already have a reference to your row entity from the selection. The documentation is here.
gridApi.cellNav.scrollTo(grid, $scope, rowEntity, null);
I managed to hack together something that works pretty well but it's a bit dodgy and could probably be cleaner with a bit more Angular/jquery understanding.
I used the browser dom explorer to find that the scrollbars have a css class that we can detect to find them and then set the scroll properties on them to have the grid scroll (the grid and scrollbars are separate divs but their properties are bound so changing one updates the other).
It doesn't completely work for scrolling to the last row of the grid. This could be a timing issue, I've noticed when using breakpoints that the grid comes on screen a little larger and then shrinks down to it's final size. This could be messing with the scrolling values.
The first loop finds the height of the grid by adding up the rows, and the y position of the row for my data object (project), then we find the scrollbar and set it's scrollTop, trying to centre the row on screen without going out of bounds.
var grid = $scope.projectsGridApi.grid;
// var row = grid.rowHashMap.get(project.$$hashKey);
var found = false;
var y = 0;
var totalY = 0;
var rowHeight = 0;
for (var rowIdx in grid.rows)
{
var row = grid.rows[rowIdx];
if (row.entity.$$hashKey == project.$$hashKey)
{
found = true;
rowHeight = row.height;
}
if (!found)
{
y += row.height;
}
totalY += row.height;
}
// now find the scroll bar div and set it's scroll-top
// (todo: checking if we're at the end of the list - setting scrollTop > max means it doesn't work properly
var grid = $scope.projectsGridApi.grid;
// annoyingly this is nastily coded to find the scrollbar and isn't completely right
// I think the grid is a little taller when this is called, then shrinks
// which affects what the maximum is (so we might not always be able to put the selected item on screen if it is the last one).
var holderDiv = $('#projectsGridHolder');
if (holderDiv)
{
var scrollBarDivs = holderDiv.find('.ui-grid-native-scrollbar');
if (scrollBarDivs)
{
for (var scrollBarDivIdx in scrollBarDivs)
{
var scrollBarDiv = scrollBarDivs[scrollBarDivIdx];
var scrollBarDivClass = scrollBarDiv.className;
if (scrollBarDivClass)
{
if (scrollBarDivClass.indexOf('vertical') != -1)
{
var scrollHeight = scrollBarDiv.scrollHeight;
var clientHeight = scrollBarDiv.clientHeight;
if (rowHeight > 0)
{
y -= (clientHeight - rowHeight) / 2; // center on screen be scrolling slightly higher up
}
if (y < 0) y = 0;
else if (y > totalY - clientHeight) y = totalY - clientHeight;
scrollBarDiv.scrollTop = y;
}
}
}
}
}

WPF - How to work out how much of a canvas background image is cropped?

I have a canvas with a background image:
var bi = new BitmapImage(new Uri(imgLocFull));
var ib = new ImageBrush(bi) {Stretch = Stretch.UniformToFill};
MyCanvas.Background = ib;
I am overlaying various shapes on the image, and want the position of the shapes relative to the background image to be fixed.
If my application window is resized, the amount of the image that is cropped, horizontally and vertically, changes, and when my shapes are redrawn, they do not appear in the same position on the background image.
How can I determine how much of the image has been cropped (to apply an adjustment factor to the overlaid objects' positions?) Or is there a better way of fixing the location of a shape relative to the background image?
Here is my present drawing code:
var l = new Ellipse();
var scb = new SolidColorBrush();
scb.Color = Color.FromRgb(rCol, gCol, bCol);
l.Fill = scb;
l.StrokeThickness = 0;
l.Width = 3;
l.Height = 3;
Canvas.SetBottom(l, point.Y); // * clipping factor here?
Canvas.SetLeft(l, point.X); // * clipping factor here?
MyCanvas.Children.Add(l);
EDIT: Further Clarification
Here's a concrete example of what I am trying to achieve. My image is an aerial photograph, and I want to mark a particular geographical feature (with, say, an ellipse.)
When the window is resized, the ellipse doesn't stay on the feature, it stays relative to the left and top of the canvas.
I can get it closer to the right place by moving it using a factor (newx = newheight/oldheight * oldx) but this doesn't quite work because of the UniformToFill stretch mode, which sees some of the image clipped off the canvas.
The Top and Left of the Canvas are 'anchored', while the Bottom and Right move when resizing... try setting the Canvas.Top Attached Property instead, along with the Canvas.Left Attached Property as you are:
var l = new Ellipse();
var scb = new SolidColorBrush();
scb.Color = Color.FromRgb(rCol, gCol, bCol);
l.Fill = scb;
l.StrokeThickness = 0;
l.Width = 3;
l.Height = 3;
Canvas.SetTop(l, point.Y); // * clipping factor here?
Canvas.SetLeft(l, point.X); // * clipping factor here?
MyCanvas.Children.Add(l);
UPDATE >>>
You asked Or is there a better way of fixing the location of a shape relative to the background image?
I answered this question, so I don't understand why you would need to do anything else... your objects will not move when the screen in resized *if you only set the Grid.Top and Grid.Left properties.

ios : UIScrollView with UITableView

I want to implement one page with vertical scroll view which contains some Images, Labels and one table view in bottom.
Table may have any number of rows. When user scroll to the top other elements such as images, labels should be hide but table should be visible at the top of screen and only table items should be scrolled.
I have tried by setting the currentoffset of scrollview in method scrollViewDidEndDecelerating but its not such smooth.
Scroll view first goes above, comes down and then set the table at top.
Can you please suggest me what should i implement here?
Thanks.
Try this....
// Add image in scrollView
serviceImage = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"row.png"]];
[serviceImage setBackgroundColor:[UIColor clearColor]];
serviceImage.frame = CGRectMake(10, 10, 300, 100);
[myScrollView addSubview:serviceImage];
[serviceImage release];
// Add label in scrollView
UILabel *rateLbl = [[UILabel alloc]initWithFrame:CGRectMake(10, 105, 300, 20)];
rateLbl.text = #"Rates";
rateLbl.font = [UIFont boldSystemFontOfSize:17.0];
rateLbl.textColor = [UIColor colorWithRed:244/255.0 green:29/255.0 blue:94/255.0 alpha:1.0];
rateLbl.textAlignment = UITextAlignmentLeft;
rateLbl.backgroundColor = [UIColor clearColor];
[myScrollView addSubview:rateLbl];
[rateLbl release];
// Add table in scrollView
int heightRateTbl;
heightRateTbl = [productType count] * 44;
rateTableView.frame =CGRectMake(10, expectedLabelSize.height + expectedDecLblSize.height + heightDayTbl + 555, 300, heightRateTbl);
rateTableView.scrollEnabled = NO;
rateTableView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
[rateTableView reloadData];
You can enable or disable scroll according your choice.
// Set scrollView height
myScrollView.contentSize = CGSizeMake(320, 125 + heightRateTbl);
Do not forget to set delegates and declare all things(in .h file and in .xib file).
Hope i helped.

Flip Horizontically Grid Background Image(Brush)

I have set a Grid's background brush as an ImageBrush.
But when I set the Grid's FlowDirection to RightToLeft, the image is flipped horizontically.
Is it possible to (un)flip the grid background ImageBrush using a certain Transition or any other way?
Not much you can do about that with sensible means (there same means that are far from sensible).
Instead place an Image element as the first item in the Grid with Grid.RowSpan, Grid.ColumnSpan to cover all the cells. Use Stretch="Fill" on the Image since thats how a background typically behaves.
Well, i do understand that my comment is outdated, but this question is popping up one of the first in Google search, so here is my solution:
I was localizing the application for the right-to-left culture. The simple decision to set FlowDirection=RTL comes with unexpected drawbacks like the background containing the company logo is flipped. I have applied the matrix transformation for the image brush used to render the background:
var mbgBrush = TryFindResource("MainBackground") as Brush;
if (mbgBrush == null) return null;
if (FlowDirection == FlowDirection.LeftToRight) return mbgBrush;
var mainBgImageBrush = mbgBrush as ImageBrush;
if (mainBgImageBrush == null) return mbgBrush;
var flipXaxis = new MatrixTransform(-1.0, 0, 0, 1.0, 1, 0);
var flippedBrush = new ImageBrush
{
Stretch = Stretch.None,
Opacity = 1.0,
ImageSource = mainBgImageBrush.ImageSource,
RelativeTransform = flipXaxis
};
return flippedBrush;

Piemenu for WPF

Are there any working piemenu controls for WPF?
I've found this in my favorite , you can take a look at :
This
have a nice day.
This question is probably long dead, but just a note that the control Thomas M posted, while awesome, has a major issue: You need to mouse over and click on the actual item instead of the pie slice. This means that the pie slices are not completely adjacent and IMO defeats a lot of the clickability (Frits's law) advantages of the control. So while it looks like a pie menu, it really just positions everything radially.
I ended up doing this:
private static Path makeDeliciousKeyLimePieSlice(double innerRadius, double outerRadius,
double startAngle, double endAngle, Vector ofs)
{
Point p1 = new Point(Math.Cos(endAngle) * innerRadius, Math.Sin(endAngle) * innerRadius) + ofs;
Point p2 = new Point(Math.Cos(startAngle) * innerRadius, Math.Sin(startAngle) * innerRadius) + ofs;
Point p3 = new Point(Math.Cos(startAngle) * outerRadius, Math.Sin(startAngle) * outerRadius) + ofs;
Point p4 = new Point(Math.Cos(endAngle) * outerRadius, Math.Sin(endAngle) * outerRadius) + ofs;
PathFigure fig = new PathFigure(p1, new PathSegment[] {
new ArcSegment(p2, new Size(innerRadius, innerRadius), endAngle - startAngle, false, SweepDirection.Counterclockwise, true),
new LineSegment(p3, true),
new ArcSegment(p4, new Size(outerRadius, outerRadius), startAngle - endAngle, false, SweepDirection.Clockwise, true),
}, true).GetAsFrozen();
return new Path { Data = new PathGeometry(new[] { fig }).GetAsFrozen() };
}
This will create a "slice" of the pie. You can style this how you want if you want a true pie menu. Another option is to make it transparent (set the fill to Brushes.Transparent; it must have a fill to be hit-test visible), which looks good for radial context menus. Here's my WIP after about half an hour's work (I know the spacing sucks):
alt text http://public.blu.livefilestore.com/y1pdW5ibqWquKGosMSch9C5KmOTKkiZ35mAI7iFKKUKf3cm7TGSquXhO8hkkL9Ln6Z3tKn74u67C27Qb_AIWQxzhg/radial.png?psid=1
EDIT: ah; the cursor doesn't appear in the shot -- basically, if you use the path overlay, you can have the mouse outside the actual control but still have it highlighted.
This control needs a bit of work still but it's a great starting point and supports multiple levels of items. (ie: a hierarchy) Check it out here

Resources