每当我调整主窗口大小时，我想在框架内创建页面以自动调整它的大小。 首先，我在设计页面时只使用了堆栈面板，然后将它们放在网格的单元格内，但它没有用。
主窗口xmal：
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication3"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="1200">
<Grid Name="gridUI">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="207*"/>
<ColumnDefinition Width="122*"/>
<ColumnDefinition Width="85*"/>
<ColumnDefinition Width="35*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Label Background="AliceBlue" FontSize="8" HorizontalAlignment="Left" Name="doc" Margin="0,0,0,26.333" Grid.RowSpan="2">Documents</Label>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1" Margin="4.667,0.333,121.565,0.333" Grid.ColumnSpan="2">
<Button Click="NewSample_Click">New Sample</Button>
<Button Click="CreateReport_Click">Create Report</Button>
</StackPanel>
<Button Grid.Row="1" Grid.Column="4" Margin="0,0.333,-0.334,0.333">Settting</Button>
<StackPanel Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Name="sp_doc" Margin="0,0.333,0.333,-0.333">
<StackPanel Orientation="Horizontal" >
<Button x:Name="sss" Click="sampleDropDown">s</Button>
<Label FontSize="12" Name="sam">Samples</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_s">
</StackPanel>
<StackPanel Orientation="Horizontal" >
<Button Click="reportDropDown">r</Button>
<Label>Reports</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_r">
</StackPanel>
</StackPanel>
<Frame x:Name="newSampleFrame" Grid.ColumnSpan="3" Content="" Grid.Column="1" HorizontalAlignment="center" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="center" Width="934" Height="456" NavigationUIVisibility="Hidden"/>
</Grid>
Page xmal：
<Page x:Class="WpfApplication3.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApplication3"
mc:Ignorable="d"
d:DesignHeight="456" d:DesignWidth="934"
Title="Page1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<Border BorderBrush="Black" BorderThickness="0.5" Margin="5">-->
<StackPanel Margin="60" Grid.Row="0" Grid.Column="0" >
<StackPanel Orientation="horizontal" Margin="5">
<Label Margin="0,0,100,0">Length</Label>
<TextBox Width ="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,105,0">Width</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,99,0">Weight</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,116,0">Age</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,71,0">Casting Date</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,73,0">Testing Date</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,21,0">Concrete Temperature</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin ="0,0,91,0">Field No.</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
</StackPanel>
<StackPanel Height="30" Width="120" Grid.Row="1" Grid.Column="1" Orientation="Horizontal" Margin="5">
<Button Width="50" Margin="0,0,10,0">Save</Button>
<Button Width="50">Cancel</Button>
</StackPanel>
<!--</Border>-->
</Grid>
答案 0 :(得分：3)
对于页面“WpfApplication3.Page1”，请删除
d：DesignHeight =“456”d：DesignWidth =“934”
并添加Height =“Auto”和Width =“Auto”。这将有效
答案 1 :(得分：1)
你可以使用DockPanel作为外部contianer，并将LastChildFill设置为full。
<div ng-repeat="chart in stackedChartData">
<stacked-chart chart-data="chart.list" x="date" y="value"
width="600" height="270"
margin="{top: 40, right:20, bottom:50, left:40}"></stacked-chart>
</div>
function StackedChartController($scope, $element, $attrs){
this.x = $scope.x;
this.y = $scope.y;
this.xLabel = ($scope.xlabel || capitalize(this.x));
this.yLabel = ($scope.ylabel || capitalize(this.y));
this.height = $scope.height;
this.width = $scope.width;
this.margin = $scope.margin;
this.data = $scope.chartData || [];
this.xScale = null;
this.yScale = null;
this.svg = null;
this.svg = d3.select($element[0])
.append("svg")
.attr("width", this.width)
.attr("height", this.height)
.append("g")
.attr("transform",
"translate(" + this.margin.left + "," + this.margin.top + ")");
this.innerWidth = this.width - this.margin.left - this.margin.right;
this.innerHeight = this.height - this.margin.top - this.margin.bottom;
$scope.$watch("chartData", (function(newVal, oldVal) {
this.data = newVal;
this.xDomain = (typeof $scope.xdomain === 'function' ? $scope.xdomain : xDomainCommand);
this.yDomain = (typeof $scope.ydomain === 'function' ? $scope.ydomain : yDomainCommand);
// Redraw the graph after new data loads.
this.drawAxes();
this.append($scope.lines || [], this.data);
this.plotData(this.data);
}).bind(this));
/* Debugging
$scope.$watch("ydomain", (function(newVal, oldVal) {
console.log('ydomain', newVal, oldVal);
}).bind(this));
*/
var x = this.x,
y = this.y;
var xDomainCommand = function(data, d3){
data = data || [];
return [d3.min(data, function(d) {
return d[x];
}), d3.max(data, function(d) {
return d[x];
})];
};
var yDomainCommand = function(data, d3){
data = data || [];
return [
((d3.min(data, function(d){
return d[y];
}) - 1)), (d3.max(data, function(d){
return d[y];
}) + 1)
];
}
// Setting these methods to default functions.
// But these will often be override by different scopes
// which need to be able specify different different functions
// for caclulating the data ranges.
this.xDomain = xDomainCommand;
this.yDomain = yDomainCommand;
}
/**
* Plotting the data (an array of objects) passed to the function.
* @param data
*/
StackedChartController.prototype.plotData = function(data){
data = data || [];
var xScale = this.xScale.bind(this);
var yScale = this.yScale.bind(this);
var x = this.x;
var y = this.y;
var valueline = d3.svg.line()
.x(function(d) {
return xScale(d[x]);
})
.y(function(d) {
return yScale(d[y]);
});
// Add the valueline path.
this.svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the points
this.svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) {
return xScale(d[x])
})
.attr("cy", function(d) {
return yScale(d[y]);
})
// Tooltip
.append("svg:title")
.text((function(d){
if (typeof this.tooltip === 'function'){
return this.tooltip(d)
} else {
return null;
}
}).bind(this));
};
/**
* Sets the size of the graph (range) and max/min values to plot (domain)
*/
StackedChartController.prototype.setParams = function(){
// Set the ranges
this.xScale = d3.time.scale().range([0, this.innerWidth]);
//xScale = d3.scale.linear().range([0, width]);
this.yScale= d3.scale.linear().range([this.innerHeight, 0]);
// Scale the range of the data
this.xScale.domain(this.xDomain(this.data, d3));
this.yScale.domain(this.yDomain(this.data, d3));
// Define the axes
var axisGenerators = {};
axisGenerators.x = d3.svg.axis().scale(this.xScale)
.orient("bottom").ticks(5);
axisGenerators.y = d3.svg.axis().scale(this.yScale)
.orient("left").ticks(5);
return axisGenerators;
};
/**
* Adds extra lines beyond the initial one created by the initial dataset.
*
*/
StackedChartController.prototype.append = function(lines, data){
data = data || [];
var xScale = this.xScale.bind(this);
var yScale = this.yScale.bind(this);
lines.forEach(function(item){
var valueline = d3.svg.line()
.x(function(d) {
return xScale(d[item.x]);
})
.y(function(d) {
return yScale(d[item.y]);
});
this.svg.append("path")
.attr("class", "line")
.style("stroke", item.color || 'black')
.attr("d", valueline(this.data));
if (item.showPoints === true) {
this.svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function (d) {
return xScale(d[item.x])
})
.attr("cy", function (d) {
return yScale(d[item.y]);
})
}
}, this);
};
/**
* Clears the graph before redrawing the axes.
*/
StackedChartController.prototype.drawAxes = function(){
var svg = this.svg;
// Remove original lines drawn on the axes.
// PF (2016/03/04) This is interfering with multiple datasets.
svg.selectAll('*').remove();
var axisGenerators = this.setParams();
// Add the X Axis
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + this.innerHeight + ")")
.call(axisGenerators.x);
// text label for the x axis
// Add the Y Axis
svg.append("svg:g")
.attr("class", "y axis")
.call(axisGenerators.y);
};
return {
restrict: 'E',
replace: true,
scope: {
x: '@',
y: '@',
height: '=',
width: '=',
margin: '=',
chartData: '=',
tooltip: '=',
lines: '=',
xdomain:'=',
ydomain: '='
},
template: '<svg></svg>',
controller: StackedChartController
};
};
您可以使用要填充面板的控件替换Button。另外一个好处是你可以设置其他控件停靠在另一边
<DockPanel LastChildFill="True">
<Button Content="LastChildFill=True"/>
</DockPanel>
我从这里得到了这些例子以及更多信息：http://www.wpftutorial.net/DockPanel.html