Manipulate delimiter between control and content

Question

Is it possible to stylize Manipulate so that there is a line separating the control and the content? The code

Manipulate[Plot3D[Sin[x + y^2], {x, -3, 3}, {y, -2, 2}],
 {x, 10, 100, 1},
 {y, 10, 100, 1},
 ControlPlacement -> Left]

gives

but I'm looking for something like

Playing around with Framed and the option Paneled I can do something like

Framed[Manipulate[Plot3D[Sin[x + y^2], {x, -3, 3}, {y, -2, 2}],
  {x, 10, 100, 1},
  {y, 10, 100, 1},
  ControlPlacement -> Left, Paneled -> False], FrameMargins -> 10]

which gives

Now I would just need to include a line. Just an idea. Any thoughts?

Answer 1

The most general solution is to do the whole layout yourself.

You can actually use Control and put the controls themselves in the Grid along with your output.

So you will have only ONE grid, which now includes everything in it. Both the controls and the final output of your Manipulate code. This gives you full control of what you want to do. For your example, you can then do

Manipulate[ 
 Grid[{
   {Grid[{
      {"x", Control[{x, 10, 100, 1}]},
      {"y", Control[{y, 10, 100, 1}]}
      }]
    ,
    Plot3D[Sin[x + y^2], {x, -3, 3}, {y, -2, 2}]
    }
   }, Frame -> All, FrameStyle -> Gray]
 ,
 Paneled -> False]

And if you want just a line between the controls and the plot then

Manipulate[ 
 Grid[{
   {Grid[{
      {"x", Control[{x, 10, 100, 1}]},
      {"y", Control[{y, 10, 100, 1}]}
      }]
    ,
    Item[Plot3D[Sin[x + y^2], {x, -3, 3}, {y, -2, 2}], 
     Frame -> {{True, False}, {False, False}}]}
   }]
 ,
 Paneled -> False]

But now since you have everything inside a Grid, you can play with the layout as you want. For example, you can do this

Manipulate[ 
 Grid[{
   {Grid[{
      {"x", Control[{x, 10, 100, 1}]},
      {"y", Control[{y, 10, 100, 1}]}
      }]
    },
   {
    Plot3D[Sin[x + y^2], {x, -3, 3}, {y, -2, 2}]
    }
   }, Frame -> All, FrameStyle -> {Dashed, Red}, Spacings -> {1, 1}]
 ,
 Paneled -> False]

Or you can put one control above, and one below

Manipulate[ 
 Grid[{
   {"x", Control[{x, 10, 100, 1}]},
   {Item[Plot3D[Sin[x + y^2], {x, -3, 3}, {y, -2, 2}], Frame -> All], 
    SpanFromLeft},
   {"y", Control[{y, 10, 100, 1}]}
   }, Frame -> True, FrameStyle -> Gray, Spacings -> {1, 1}
  ]
 ,
 Paneled -> False]

And so on. The choices are limitless.

You can change the style of the Frame and change the size of the controls as well. Basically you can now use all the styling available for Grid and Frame as you want and not worry about Manipulate itself.

Answer 2

Note: This solution is heavily based on the one by @Nasser, this is just to show how to make better use of Manipulate.

Here's how I would do it:

Manipulate[
 Grid[
  {{
    Grid[
     {{"x", Control[{x, 10, 100, 1}]},
      {"y", Control[{y, 10, 100, 1}]}}
     ],
    Item[
     Dynamic@Plot3D[Sin[x + y^2], {x, -3, 3}, {y, -2, 2}],
     Frame -> {{True, False}, {False, False}}
     ]}}
  ],
 {{x, 10}, None}, {{y, 20}, None},
 Paneled -> False
 ]

The differences to the answer from @Nasser are:

• Dynamic wrapped around the plot. This makes sure the sliders work as expected, because otherwise dragging the slider will redraw the slider itself.
• {{x, 10}, None} as argument to Manipulate. This tells Manipulate that x should be one of the variables to localize, but that it shouldn't create a control. The 10 is the initial value for x, so you can easily set that as well. This should make the whole thing work better when restarting Mathematica.

Answer 3

We can also use the (undocumented) Method option "ControlAreaDisplayFunction" with a custom function that gives the desired look:

ClearAll[controlAreaDisplayFunction]
controlAreaDisplayFunction[side_: Right, itemsize_: Automatic, alignment_: Automatic, 
  spacings_: Automatic, style_: GrayLevel[0, .2]] := Grid[{{
    Item[#, ItemSize -> itemsize /. Automatic -> 
     (side /. {Right | Left -> {All, Scaled[1/3]}, Top | Bottom -> {Scaled[1/3], All}}),
    Frame -> MapAt[style &, {{None, None}, {None, None}}, 
      side /. {Top -> {2, 2}, Bottom -> {2, 1}, Left -> {1, 1}, Right -> {1, 2}}]]}},
   Alignment -> alignment /. Automatic -> 
     (side /. {Right -> {Left, Center}, Left -> {Right, Center},
          Top -> {Center, Top}, Bottom -> {Center, Bottom}}), 
   Spacings -> spacings /. Automatic -> 
     (side /. { Left | Right -> {5, 0}, Top | Bottom -> {0, 5}})] &

Examples:

Panel @ Manipulate[Plot3D[Sin[x + u + v + y^2], {u, -3, 3}, {v, -2, 2}, 
    ImageSize -> 300],
  {x, 10, 100, 1}, {y, 10, 100, 1}, 
  ControlPlacement -> Left, 
  Paneled -> False, 
  Method -> {"ControlAreaDisplayFunction" -> controlAreaDisplayFunction[]}]

Use ControlPlacement -> Right and "ControlAreaDisplayFunction" -> controlAreaDisplayFunction[Left] to get

Use ControlPlacement -> Bottom and "ControlAreaDisplayFunction" -> controlAreaDisplayFunction[Top] to get

Use ControlPlacement -> Top and "ControlAreaDisplayFunction" -> controlAreaDisplayFunction[Bottom] to get

Replace controlAreaDisplayFunction[Bottom with controlAreaDisplayFunction[Bottom, Automatic, Automatic, Automatic, Directive[AbsoluteThickness[5], Orange]] to get