Office 2010 のタブと同じように、1 つのタブをダブルクリックすると、メニューが縮小し、コンテンツが上に移動します。以下に示すように：
HTML の別のサンプル:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>html example</title>
<style type="text/css">
.box{width:300px;border:1px solid #ccc;font-size:12px}
.box dt{line-height:24px;text-align:right;margin:0;padding:0 10px;background:#CCC}
.box dd{line-height:20px;margin:0}
#holder2{height:200px}
</style>
</head>
<body>
<dl class="box">
<dt id="title">Click to expand/shrink</dt>
<dd id="holder">
content
</dd>
</dl>
<br>
<dl class="box">
<dt id="title2">Click to expand/shrink</dt>
<dd id="holder2">
content
</dd>
</dl>
<script type="text/javascript">
var Toggle = function(id, minH, maxH, expand, rate, speed){
this.minH = minH;
this.maxH = maxH;
this.tempH = 0;
this.rate = rate;
this.speed = speed;
this.moving = false;
this.moveT = null;
this.holder = document.getElementById(id);
this.expand = expand;
}
Toggle.prototype = {
start : function(){
if(this.moving) return;
this.moving = true;
this.tempH = this.expand ? this.minH : this.maxH;
var t = this;
this.moveT = setInterval(function(){t.move()}, this.speed);
},
move : function(){
if(this.expand){
if(this.tempH >= this.maxH){
this.moving = false;
this.expand = false;
clearInterval(this.moveT);
}else{
var h = Math.round((this.maxH - this.tempH) * this.rate);
if(h <= 1){
h = 1;
}
this.tempH += h;
}
}else{
if(this.tempH <= this.minH){
this.moving = false;
this.expand = true;
clearInterval(this.moveT);
}else{
var h = Math.round((this.tempH - this.minH) * this.rate);
if(h <= 1){
h = 1;
}
this.tempH -= h;
}
}
this.holder.style.height = this.tempH + "px";
}
}
//module1（default:have shrunk)
var obj = new Toggle("holder",20,200,true, 0.2, 10);
document.getElementById("title").onclick = function(){
obj.start();
}
//module1（default:have expanded)
var obj2 = new Toggle("holder2",20,200,false, 0.2, 10);
document.getElementById("title2").onclick = function(){
obj2.start();
}
</script>
</body>
</html>
Expander を左に縮小したい場合、右側のコンテンツが左に移動します。手伝って頂けますか？
それは私のコードです：</p>
<ribbon:RibbonWindow x:Class="WpfRibbonApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Title="MainWindow"
x:Name="RibbonWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Expander Grid.Row="1" Height="300" HorizontalAlignment="Left" Name="expander1" VerticalAlignment="Top" Width="155" ExpandDirection="Right" Margin="12,57,0,0" BorderBrush="Black">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150*" />
<RowDefinition Height="148*" />
</Grid.RowDefinitions>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="36,99,0,0" Name="textBlock1" Text="There're sth." VerticalAlignment="Top" />
</Grid>
</Expander>
<Calendar Grid.Row="1" Height="170" HorizontalAlignment="Left" Margin="173,57,0,0" Name="calendar1" VerticalAlignment="Top" Width="180" />
</Grid>
変更されたコード:
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Expander Grid.Column="0" Height="300" HorizontalAlignment="Left" Name="expander1"
VerticalAlignment="Top" ExpandDirection="Right" Margin="12,57,0,0" BorderBrush="Black" Expanded="expander1_Expanded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150*" />
<RowDefinition Height="148*" />
</Grid.RowDefinitions>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="6,99,0,0"
Name="textBlock1" Text="There're sth." VerticalAlignment="Top" Width="128" />
</Grid>
</Expander>
<Calendar Grid.Column="1" HorizontalAlignment="Left" Margin="0,57,0,0"
Name="calendar1" VerticalAlignment="Top" />
</Grid>